前端分页插件Datatables

发布于 2018-11-29  174 次阅读


发现一个很好用的前端分页插件Datatables和JQuery一起用的,分页方式有几种,一种是逻辑分页(客户端分页),一种是物理分页(服务器分页)

物理分页需要把数据转换成指定格式,比较麻烦,不推荐使用。

目前我使用的是逻辑分页,使用如下:

<table id="example">
    <thead>
        <tr>
            <th>列一</th>
            <th>列二</th>
            <th>列三</th>
            <th>列四</th>
            <th>列五</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>列一</th>
            <th>列二</th>
            <th>列三</th>
            <th>列四</th>
            <th>列五</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>数据一</th>
            <th>数据二</th>
            <th>数据三</th>
            <th>数据四</th>
            <th>数据五</th>
        </tr>
        <tr>
            <th>数据一</th>
            <th>数据二</th>
            <th>数据三</th>
            <th>数据四</th>
            <th>数据五</th>
        </tr>
        <tr>
            <th>数据一</th>
            <th>数据二</th>
            <th>数据三</th>
            <th>数据四</th>
            <th>数据五</th>
        </tr>
    </tbody>
</table>

js使用代码

$('#example').dataTable();

由于默认配置是中文,所以需要我们自定义改成中文

// 自定义配置数据
$('#example').DataTable({
    columnDefs : [ {
        orderable : false,// 禁用排序
        targets : [ 4 ]// 指定的列从0开始
    } ],
    order : [ 2, 'desc' ],//指定默认排序列和排序方式
    language : {
        "sProcessing" : "处理中...",
        "sLengthMenu" : "显示 _MENU_ 项结果",
        "sZeroRecords" : "没有匹配结果",
        "sInfo" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
        "sInfoEmpty" : "显示第 0 至 0 项结果,共 0 项",
        "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix" : "",
        "sSearch" : "搜索:",
        "sUrl" : "",
        "sEmptyTable" : "表中数据为空",
        "sLoadingRecords" : "载入中...",
        "sInfoThousands" : ",",
        "oPaginate" : {
            "sFirst" : "首页",
            "sPrevious" : "上页",
            "sNext" : "下页",
            "sLast" : "末页"
        },
        "oAria" : {
            "sSortAscending" : ": 以升序排列此列",
            "sSortDescending" : ": 以降序排列此列"
        }
    }
});

最后附上官方下载网址,国内版本http://www.datatables.club/

                                    国外版本https://datatables.net/

最后抱怨一句CSDN恶心了,需要登录才能看内容


再无夏秋