How to do pagination in jquery

Question

I am new to jquery. I am trying to do sorting and pagination here but a problem is it is only displaying page number not the contents on that page. I know I am doing something wrong but I am not able to figure out what is wrong.

I know the problem is onPageClick but I am not able to figure out what to write there. I already tried the examples given here but it is not helping.

I am posting my code here.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
        <script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script>
        <script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
    <script type="text/javascript">
    $(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 

</script>


<script type="text/javascript">
    $(function() {
    $(".tablesorter").pagination({
        items: 17,
        itemsOnPage: 1,
        cssStyle: 'light-theme',
        onPageClick: function(pageNumber, event) {
                // Callback triggered when a page is clicked
                // Page number is given as an optional parameter
            },
    });
});
</script>



<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>
</head>

<body>

<table id="myTable" class="tablesorter" style="width:50%">
<thead>
      <tr>
        <th><span>ID</span></th>
        <th><span>Name</span></th>
  <tr>
<tbody>
    <td>1</td>      
    <td>Jill</td>
  </tr>
  <tr>
    <td>2</td>  
    <td>Bill</td>
  </tr>
  <tr>
    <td>3</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>4</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>5</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>6</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>7</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>8</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>9</td>  
    <td>Chill</td>
  </tr>
 <tr>
    <td>10</td> 
    <td>Chill</td>
  </tr>
 <tr>
    <td>11</td> 
    <td>Chill</td>
  </tr>
 <tr>
    <td>12</td> 
    <td >Chill</td>
  </tr>
 <tr>
    <td >13</td>    
    <td>Chill</td>
  </tr>
 <tr>
    <td>14</td> 
    <td>Chill</td>
  </tr>
 <tr>
    <td>15</td> 
    <td>Chill</td>
  </tr>
 <tr>
    <td>16</td> 
    <td>Chill</td>
  </tr>
 <tr>
    <td>17</td> 
    <td>Chill</td>
  </tr>

</tbody>
</table>

</body>
</html>

Please help me

Please check this link http://stackoverflow.com/questions/20896076/how-to-use-simplepagination-jquery — Pardeep Pathania, Apr 19 '16 at 08:27
@PietroLerro I don't have a working version...problem with me is I am able to sort the column but I am not able to show the contents of the page when clicking on the page number — Aditya Shrivastava, Apr 19 '16 at 09:44
Ok but .. where is the "page content" is it the other td ? the column with "chill" text into ? — Pietro, Apr 19 '16 at 10:01
Actually when we do pagination than it will display different page number...right there it is displaying correct page number as I distributed 17 rows of table in 17 different pages but on clicking a specific page it is not able to show content. Problem is in onPageClick what is should do is the problem... I am showing ID and Name in the table so for each page there is one ID and name..So Chill is the name — Aditya Shrivastava, Apr 19 '16 at 10:04

Pietro · Answer 1 · 2016-04-19T10:43:36.330

It seems the library is deleting the "content" part, so, even if you bind the onPageClick you can't show anything because it is not in the dom. You should make two <ul>, one for the pagination and one for the content, and link them with a data attribute.

<ul><li id="1"> page id 1 </li></ul>
<ul class="content"><li data-id="1"> content </li></ul>

then, on page click you can do

$('li[data-id="'+item_id+'"]').show();

EDIT: added example code (only changed parts)

<script type="text/javascript">
    $(function() {
    $(".tablesorter").pagination({
        items: 17,
        itemsOnPage: 1,
        cssStyle: 'light-theme',
        onPageClick: function(pageNumber, event) {
                    // Callback triggered when a page is clicked
                    // Page number is given as an optional parameter

                    // hide all
                    hideContent();
                    //show only the one selected
                    $('li[data-id="'+pageNumber+'"]').show();

                },
    });
    function hideContent(){
        $('ul.page-contents > li').hide();
    }
    hideContent();
});
</script>


<table id="myTable" class="tablesorter" style="width:50%">
<thead>
      <tr>
        <th><span>ID</span></th>
        <th><span>Name</span></th>
  <tr>
  </thead>
<tbody>
  <tr><td>1</td>      <td>Jill</td></tr>
  <tr><td>2</td>  <td>Bill</td>  </tr>
  <tr><td>3</td>  <td>Chill</td></tr>
 <tr><td>4</td>  <td>Chill</td></tr>
 <tr><td>5</td>  <td>Chill</td></tr>
 <tr><td>6</td>  <td>Chill</td></tr>
 <tr><td>7</td>  <td>Chill</td></tr>
 <tr><td>8</td>  <td>Chill</td></tr>
 <tr><td>9</td>  <td>Chill</td></tr>
 <tr><td>10</td> <td>Chill</td></tr>
 <tr><td>11</td> <td>Chill</td></tr>
 <tr><td>12</td> <td >Chill</td></tr>
 <tr><td >13</td>    <td>Chill</td></tr>
 <tr><td>14</td> <td>Chill</td></tr>
 <tr><td>15</td> <td>Chill</td></tr>
 <tr><td>16</td> <td>Chill</td></tr>
 <tr><td>17</td> <td>Chill</td></tr>

</tbody>
</table>
<ul class="page-contents">
<li data-id="1"> content 1 </li>
<li data-id="2"> content 2 </li>
<li data-id="3"> content 3 </li>
</ul>

So for each row you are saying I have to make for pagination and other for content like ---
page id 3

content

page id 4

content
and so on... — Aditya Shrivastava, Apr 19 '16 at 10:31
Sorry... I am not understanding..and how will it help...can you please post a working example — Aditya Shrivastava, Apr 19 '16 at 10:35
Excuse me @AdityaShrivastava can you please consider setting my response as accepted ? Or did you solve with the other answer from Dhaval? — Pietro, Apr 19 '16 at 12:17

Dhaval Pankhaniya · Accepted Answer · 2016-04-19T10:49:35.533

use following code in your script

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript" src="../jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script>
    <script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
    <script type="text/javascript">
    </script>


<script type="text/javascript">
    $(document).ready(function() { 
    $("table") 
        .tablesorter({widthFixed: true, widgets: ['zebra']}) 
        .tablesorterPager({container: $(".tablesorter")}); 
    }); 
</script>



<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>
</head>

<body>

<table id="myTable" class="" style="width:50%">
    <thead>
      <tr>
        <th><span>ID</span></th>
        <th><span>Name</span></th>
      </tr>
<tbody>
<tr>
    <td>1</td>      
    <td>Jill</td>
</tr>
<tr>
    <td>2</td>  
    <td>Bill</td>
</tr>
<tr>
    <td>3</td>  
    <td>Chill</td>
</tr>
<tr>
    <td>4</td>  
    <td>Chill</td>
</tr>
<tr>
    <td>5</td>  
    <td>Chill</td>
</tr>
<tr>
    <td>6</td>  
    <td>Chill</td>
 </tr>
<tr>
    <td>7</td>  
    <td>Chill</td>
</tr>
<tr>
    <td>8</td>  
    <td>Chill</td>
</tr>
<tr>
    <td>9</td>  
    <td>Chill</td>
</tr>
<tr>
    <td>10</td> 
    <td>Chill</td>
</tr>
<tr>
    <td>11</td> 
    <td>Chill</td>
</tr>
<tr>
    <td>12</td> 
    <td >Chill</td>
</tr>
<tr>
    <td >13</td>    
    <td>Chill</td>
</tr>
<tr>
    <td>14</td> 
    <td>Chill</td>
</tr>
<tr>
    <td>15</td> 
    <td>Chill</td>
</tr>
<tr>
    <td>16</td> 
    <td>Chill</td>
</tr>
<tr>
    <td>17</td> 
    <td>Chill</td>
</tr>

</tbody>
</table>
<div id="pager" class="tablesorter" style="top: 687px; position: absolute;">
<form>
    <img src="../addons/pager/icons/first.png" class="first">
    <img src="../addons/pager/icons/prev.png" class="prev">
    <input type="text" class="pagedisplay">
    <img src="../addons/pager/icons/next.png" class="next">
    <img src="../addons/pager/icons/last.png" class="last">
    <select class="pagesize">
        <option selected="selected" value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    </select>
</form>
</div>
</body>
</html>

TableSort

I think you didn't understand I want to do pagination not sorting the example you posted is for sorting... I am able to do sorting but no pagination — Aditya Shrivastava, Apr 19 '16 at 09:53
if you need more help please refer [link](http://tablesorter.com/docs/example-pager.html) — Dhaval Pankhaniya, Apr 19 '16 at 10:41
Can you please tell me that what is this for----- $(document).ready(function() { $("table") .tablesorter({widthFixed: true, widgets: ['zebra']}) .tablesorterPager({container: $(".tablesorter")}); }); — Aditya Shrivastava, Apr 19 '16 at 10:58
1)tablesorter method initialize sorting options .2)tablesorterPager method initialize the pager — Dhaval Pankhaniya, Apr 19 '16 at 11:24
What if we want a search box to directly jump on the specific page in pagination...is there any code available for that? — Aditya Shrivastava, Apr 21 '16 at 05:35

How to do pagination in jquery

2 Answers2