DataTables-1.10.15 服务器端使用教程

以前也使用过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    };}//构建datatablefunction 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);        });

4、引用

（1）mickey_miki
dataTables-使用详细说明整理
http://blog.csdn.net/mickey_miki/article/details/8240477
（2）丶拾慌
datatables参数配置详解
http://blog.csdn.net/zhu_xiao_yuan/article/details/51252300