title: how to make <li> clickable and get its data-action value?
body: <p>So I'm using a jQuery bootgrid but I modify its navigation.</p>
  
  <p>The original bootgrid:</p>
  
  <p><a href="https://i.stack.imgur.com/sHTW1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sHTW1.jpg" alt="enter image description here"></a></p>
  
  <p>My modified bootgrid:
  <a href="https://i.stack.imgur.com/O0Jde.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O0Jde.png" alt="enter image description here"></a></p>
  
  <p>As you can see, I hide the search textbox and pagination dropdown on the original bootgrid, and instead use my own navigation design.</p>
  
  <p>On my navigation, plus sign for making new user,trash for bulk delete, search sign, reload sign and pagination.</p>
  
  <p><a href="https://i.stack.imgur.com/ib3yi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ib3yi.png" alt="enter image description here"></a>   </p>
  
  <p>My problem is the pagination, it is not clickable and doesn't close once I click the li that I want (ex. 25 per page). Also how can I get the data-action value? I try to put a js function onclick="getPage(10)" on one of the li and it is working, which means that li recognize the click, but instead of doing that, I want a solution where I use jquery to get that data-action value.</p>
  
  <p>This is my html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="dropdown"&gt;
      &lt;a href="" data-toggle="dropdown" aria-expanded="false"&gt;
          &lt;i class="zmdi zmdi-more-vert"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu dropdown-menu-right"&gt; 
          &lt;li&gt;
              &lt;a data-action="10" page="10" onclick="getPage(10)"&gt;10 per page&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a data-action="25" page="25"&gt;25 per page&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a data-action="50" page="50"&gt;50 per page&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a data-action="100" page="100"&gt;100 per page&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a data-action="-1" page="100"&gt;All&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my code on my bootgrid.</p>
  
  <pre><code>  var table = $('#settings-user-list');
  
  table.bootgrid({
      css     : {
          icon        : 'zmdi icon',
          iconColumns : 'zmdi-view-list',
          iconDown    : 'zmdi-caret-down',
          iconRefresh : 'zmdi-refresh',
          iconUp      : 'zmdi-caret-up',
      },
      labels  : {
          noResults   : noResult,
          loading     : loadingTable,
      },
      ajax         : true,
      url          : '/action/list',
      selection    : true,
      rowCount     : [10, 25, 50, 100, -1],
      multiSelect  : true,
      navigation   : 2
  });  
  </code></pre>