0

I have the below html tags. I will have n number of buttons and respective tables in a page. The page is dynamic, the data may increase, or decrease with respective backend where it feeds the data from. I would like to implement pagination, and showcase only 2 buttons and tables per page. if user wanna see they have to use pagination to see remaining data.

    <html>
      <body>
        <div id="tab">
          <div>
            <button type="button" class="button">Source_1</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>111</th>
             </tr>
             <tr>
             <td>111</td>
             </tr>
             </table>
           </div>
          <div>
            <button type="button" class="button">Source_2</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>222</th>
             </tr>
             <tr>
             <td>222</td>
             </tr>
             </table>
          </div>
          <div>
            <button type="button" class="button">Source_3</button>
          </div>
          <div class="logtitude">
             <table class="data_table">
             <tr>
             <th>333</th>
             </tr>
             <tr>
             <td>333</td>
             </tr>
             </table>
          </div>
        </div>
       </body>
     </html>

Can somebody help me to achieve the pagination to display only 2 <div>buttons</div> per page.

ArrchanaMohan
  • 2,314
  • 4
  • 36
  • 84
  • you may refer https://stackoverflow.com/questions/7000048/slickgrid-vs-jqgrid and https://www.slant.co/versus/4837/4840/~jqgrid_vs_datatables for readymade plugins for creating paging. jqgrid provides formatter option to create your own html for a cell. – Anil Nov 24 '17 at 04:54

2 Answers2

0

if you are asking how then try this site http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery has some info but if your making a tutorial....well you are not wrong

CryTech
  • 1
  • 2
0

You can use Jquery data tables, it is very simple and easy to use with PAGINATION, SORT, SEARCH features.

<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

$(document).ready(function(){
    $('.data_table').DataTable();
});

Like above sample u can create multiple data tables with different class name or Id.

Rajesh Kumaresan
  • 57
  • 5
  • I had the below error message: DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2. I'm not trying to paginate table instead of doing it with only button div tags. – ArrchanaMohan Nov 24 '17 at 05:19
  • you might be using same class name or id name for both div and table – Rajesh Kumaresan Nov 24 '17 at 05:26
  • Nope its different. Please look at the sample html I used to build the pagination. My html content similar like that. It has different class name for button, and table. – ArrchanaMohan Nov 24 '17 at 06:25