DataTables-1.10.15 服务器端使用教程

最新推荐文章于 2022-08-01 22:07:09 发布

我有一个好名字

最新推荐文章于 2022-08-01 22:07:09 发布

阅读量939

点赞数

分类专栏： js插件文章标签： javascript datatables serverSide

本文链接：https://blog.csdn.net/BlankKai/article/details/77832727

版权

js插件专栏收录该内容

0 篇文章 0 订阅

订阅专栏

以前也使用过DataTables，前一阵在用的时候发现参数都变了，才有了这个教程

DataTables简介
基本配置
工具类

1、DataTables简介

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源（ MIT license ）！商业支持
更多特性请到官网查看

DataTables中文网网址：http://datatables.club/

2、基本配置

（1）js

var datatable = $("datatableName").DataTable({
        "pagingType" : "full_numbers",//页码显示方式
        "lengthChange" : false,//是否允许在网页上切换每页记录数
        "ordering" : true,//是否开启排序
        "searching" : false,//是否允许网页上搜索
        "displayStart" : 0,//初始化开始序号，从0开始
        "pageLength" : 3,//每页记录数
        "processing" : true,//是否显示加载中的信息
        "serverSide" : true,//是否服务器端处理
        "language" : {//界面汉化
            "emptyTable" : "没有相关数据",
            "infoEmpty" : "0 / 0",
            "thousands" : ",",
            "zeroRecords" : "没有相关数据",
            "info" : "第 _PAGE_ 页 / 共 _PAGES_ 页",
            "infoEmpty" : "没有相关数据",
            "processing" : "正在处理...",
            "loadingRecords" : "请等待，数据正在加载中......",
            "paginate" : {
                "first" : "首页",
                "previous" : "上一页",
                "next" : "下一页",
                "last" : "尾页"
            },
            "aria" : {
                "sortAscending" : "升序",
                "sortDescending" : "降序"
            }
        },
        "ajax" : {
            "url" : "urlAction/url.do",//访问地址
            "data" : function(data) {//向服务器发送的其他信息
                    return $.extend({}, data, {
                        "paramName":"paramVal",//键值对形式
                        ...
                    });
            }
        },
        "columns" : [//每列的参数
            {
                "name" : name,
                "data" : name,
                "visible" : visible,//是否可见
                "defaultContent" : "",//默认内容
                "orderable" : orderable,//是否可排序
                "orderSequence" : orderSequence//排序规则["asc","desc"]，先升序后降序，循环
            },...
        ],
        "createdRow" : function(row, data, dataIndex){//加载没行时的处理方法
            ...
        }
    });

pageType类型

numbers 只显示数字（1.10.8版本）
simple 只有上一页和下一页两个按钮
simple_numbers 上一页和下一页两个按钮，加上页数按钮
full 首页，尾页，上一页和下一页四个按钮
full_numbers 首页，尾页，上一页和下一页四个按钮,加上数字按钮
first_last_numbers 首页，尾页两个按钮,加上数字按钮

更多详细配置请参看这里：http://datatables.club/reference/option/

（2）服务器端处理

参数在这里 : http://datatables.club/manual/server-side.html

3、工具类


//js包
<script
    src="${basePath }/adminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script
    src="${basePath }/adminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
//工具方法
//创建Column参数
function buildColumn(name, visible, orderable, orderSequence) {
    if (visible == null || typeof (visible) == "undefined") {
        visible = true;
    }
    if (orderable == null || typeof (orderable) == "undefined") {
        orderable = true;
    }
    if (orderSequence == null || typeof (orderSequence) == "undefined") {
        orderSequence = [ "asc", "desc" ];
    }
    return {
        "name" : name,
        "data" : name,
        "visible" : visible,
        "defaultContent" : "",
        "orderable" : orderable,
        "orderSequence" : orderSequence
    };
}
//构建datatable
function datatables(tableId, url, columns, rowInit) {
    var datatable = $("#" + tableId).DataTable({
        "pagingType" : "full_numbers",
        "lengthChange" : false,
        "ordering" : true,
        "searching" : false,
        "displayStart" : 0,
        "pageLength" : 3,
        "processing" : true,
        "serverSide" : true,
        "language" : {
            "emptyTable" : "没有相关数据",
            "infoEmpty" : "0 / 0",
            "thousands" : ",",
            "zeroRecords" : "没有相关数据",
            "info" : "第 _PAGE_ 页 / 共 _PAGES_ 页",
            "infoEmpty" : "没有相关数据",
            "processing" : "正在处理...",
            "loadingRecords" : "请等待，数据正在加载中......",
            "paginate" : {
                "first" : "首页",
                "previous" : "上一页",
                "next" : "下一页",
                "last" : "尾页"
            },
            "aria" : {
                "sortAscending" : "升序",
                "sortDescending" : "降序"
            }
        },
        "ajax" : {
            "url" : url,
            "data" : function(data) {
                var map = {};
                var param = $("#searchForm").serialize();
                var params = param.split("&");
                for (var i = 0; i < params.length; i++) {
                    var p = params[i];
                    var nv = p.split("=");
                    map[nv[0]] = nv[1];
                }
                return $.extend({}, data, map);
            }
        },
        "columns" : columns,
        "createdRow" : rowInit
    // function(row, data, dataIndex) {}
    });
    return datatable;
}

//**************************************
//调用
var columns = [ buildColumn("id", false, false),
                buildColumn("name", true, false),
                buildColumn("url", true, false),
                buildColumn("parentId", true, false),
                buildColumn("menuLevel", true, false),
                buildColumn("orderNum", true, false),
                buildColumn("icon", true, false) ];
var datatable = datatables("menuList", "${basePath}/admin0302",
        columns, function(row, data, dataIndex) {
            alert(data);
        });