jquery 分页控件的位置显示。求救!!!
发布网友
发布时间：2022-04-23 17:30
共1个回答
热心网友
时间：2022-05-15 12:33
1、在class="page"的table后面加<div class="pagediv"></div>
2、.appendTo($pager);修改为.appendTo(".pagediv");
完整代码：
<table width="100%" border="1" cellspacing="0" cellpadding="0" class="page"><tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div class="pagediv"></div>
<script type="text/javascript">
$(function () {
$('table.page').each(function () {
var currentPage = 0;
var numPerPage = 6;
var $table = $(this);
var pageFunction = function () {
$table.find('tbody tr').show()
.slice(0, currentPage * numPerPage)
.hide()
.end()
.slice(((currentPage + 1) * numPerPage - 1) + 1)
.hide()
.end();
} //end of pageFunction()
var num_row = $table.find('tbody tr').length;
var num_pages = Math.ceil(num_row / numPerPage);
var $pager = $('<div></div>');
for (var i = 0; i < num_pages; i++) {
$('<span> 第' + (i + 1) + '页 </span>')
.bind("click", { 'cssrain': i }, function (event) {
currentPage = event.data['cssrain'];
pageFunction();
$(this).addClass('current').siblings().removeClass('current');
})
.appendTo(".pagediv");
}
$pager.insertBefore($table);
$pager.find("span:first").addClass('current');
pageFunction();
})//end of each()
})//enf of function
</script>
