Question

我是jquery的新手。我试图在这里进行排序和分页，但问题是它只显示页码而不是该页面上的内容。我知道我做错了什么，但我无法弄清楚出了什么问题。

我知道问题是onPageClick但我无法弄清楚要在那里写什么。我已经尝试了这里给出的例子，但它没有帮助。

我在这里发布我的代码。

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

请帮帮我

Answer 1

图书馆似乎正在删除＆＃34;内容＆＃34;部分，所以，即使你绑定了onPageClick，你也无法展示任何东西，因为它不在dom中。你应该制作两个<ul>，一个用于分页，一个用于内容，并用数据属性链接它们。

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

然后，点击页面即可

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

编辑：添加了示例代码（仅更改了部分）

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

Answer 2

在脚本中使用以下代码

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

如何在jquery中进行分页

2 个答案: