jquery 分页控件的位置显示。求救！！！！！！

请大家帮帮忙~~~谢谢！我引用了一个jquery分页控件，它能对table中的内容进行分页，下面是jquery代码，引用之后显示第1页第2页的标志是出现在table的上面，我想把它放在table的下方，请问怎么修改，谢谢高手·~~~~
$(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($pager);
}

$pager.insertBefore($table);
$pager.find("span:first").addClass('current');
pageFunction();
})//end of each()
})//enf of function

举报该文章

相关建议 2013-08-08

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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/247sq4vq2.html

其他看法

无其他回答

相似回答

大家正在搜