Aditya Shrivastava Aditya Shrivastava - 7 months ago 11
Javascript Question

How to do pagination in jquery

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

Answer

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>
Comments