如何在jquery中进行分页
How to do pagination in jquery
我是jquery的新手。我试图在这里进行排序和分页，但问题是它只显示页码，而不是页面上的内容。我知道我做错了什么，但我不知道出了什么问题。
我知道问题出在PageClick上，但我不知道该在那里写什么。我已经尝试了这里给出的例子，但没有帮助。
我在这里张贴我的代码。
<!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>
请帮助我
库似乎正在删除"内容"部分，因此，即使绑定了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>
在脚本中使用以下代码
<!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
相关文章：
- 使用ajax的服务器端分页&jQuery
- 不带jquery的全屏分页
- jQuery简单分页
- 使用jQuery在表中分页
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- jQuery:根据select选项中的每页项目进行分页
- 用键盘分页jQuery下一个和上一个控件.触发器('点击'）不'不起作用
- 检测活动<李>用于jQuery转盘(分页）
- 如何自定义分页 jQuery
- jQuery 数据表 在页面上导航时，在分页表上重置行的数据
- jQuery分页刷新:分页不记得以前页面中更改的样式
- 如何在分页期间链接回特定的jquery ui选项卡
- 如何在jquery中进行分页
- JQuery在ace:dataTable分页器上为锚点类单击监听器
- jQuery不会拾取嵌套了标记值的分页
- 没有jQuery的HTML文档分页
- 自定义JQUERY未在分页页面上加载(第一页除外）
- jQuery Datatables分页设置
- DataTable没有显示分页按钮和记录信息-JQuery
- Datatable上的多个分页-Jquery插件
