javascript-客户端分页

2019-11-02 20:37:15 阅读：206 来源： 互联网

标签：pagination html javascript jquery

我想进行客户端分页,并使用Jquery建议作为建议的here.
使用该脚本几乎没有问题.无论我们在pager div上的位置如何设置,页面图标总是位于底部.再加上我的表数据大小不一致,因此页面之间的大小可能会有所不同.表的大小变化很大,但是由于重叠而导致分页器保持固定.我尝试了div进行锯齿但没有用,这是我的分页器代码

<div id="pager" class="pager">
    <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>

这是我的jQuery脚本

<script type="text/javascript">
    $(function() {
        $(theTable)
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
    });
    </script>

我的表ID是theTable.

我想将寻呼机代码放在顶部,以便表格的大小不会影响分页图标.

解决方法:

DataTables上有很多可用的示例,您可以将download的示例以及css和所需的javascripts一起…

同样很容易初始化,这里是一个代码示例：

在顶部添加所需的css和js(在下载的zip文件中可用)

<style type="text/css" title="currentStyle">
        @import "../../media/css/demo_page.css";
        @import "../../media/css/demo_table.css";
    </style>
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>

ID为“ theTable”的表

<table cellpadding="0" cellspacing="0" border="0" class="display" id="theTable">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>

    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 3.0</td>
        <td>Win 2k+ / OSX.3+</td>
        <td class="center">1.9</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Misc</td>
        <td>NetFront 3.1</td>
        <td>Embedded devices</td>
        <td class="center">-</td>
        <td class="center">C</td>
    </tr>

</tbody>

现在通过以下方式初始化数据表：

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#theTable').dataTable();
        } );
</script>

这将初始化零配置的数据表.

要设置分页的位置,请使用sDom功能

"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'

请注意,它们代表的字母lfr,t,ip：

‘l’-长度变化
‘f’-过滤输入
‘t’-桌子！
‘i’-信息
‘p’-分页
‘r’-处理

只需交换这些字母的位置,然后按p即可将它们放在您想要的位置

标签：pagination,html,javascript,jquery
来源： https://codeday.me/bug/20191102/1994001.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-客户端分页