DataTables插件使用

DataTables插件使用

DataTables插件，一个依赖于jquery的表格分页插件，使用就是配置一些选项来设置页面效果以及一些api函数的使用

贴几个地址：

官网地址：https://www.datatables.net/
Github项目地址: https://github.com/DataTables/DataTables
参数选项(中文网)：http://www.datatables.club/reference/option/
api(中文网)：http://www.datatables.club/reference/api

1、首先引用css文件和js文件：

jquery.dataTables.min.css
jquery.dataTables.min.js

建议把下载的DataTables文件里的media文件夹整个放项目里，其中 media/images 文件夹里存放了一些排序用的箭头图标的文件

2、语言配置选项

language: {
    "info": "从 _START_ 到 _END_ / 共 _TOTAL_ 条数据",
    "infoEmpty": "没有数据",
    "infoFiltered": "(从 _MAX_ 条数据中检索)",
    "lengthMenu": "每页显示 _MENU_ 条记录",
    "processing" : "正在加载数据...",
    "loadingRecords": "载入中...",
    "zeroRecords": "抱歉，没有找到",
    "sInfoThousands": ",",
    "paginate": {
        "first": "首页",
        "previous" : "前一页",
        "next": "后一页",
        "last": "尾页"
    }
}

3、配置DataTables选项

var myTable = $("#myTable").DataTable({
    "language": language,//需先定义一个language对象，配置如上
    "pagingType": "full_numbers",
    "processing": true,
    "ordering": true,
    "serverSide": true,
    "autoWidth": false,
    "dom": 'irtlp',
    "ajax": {
        "url": http://test.ajax.com/test,
        "data":{},
        "dataSrc": "aoData"
    },
    "columnDefs" : [{
        "className": "td_center",
        "targets": [0,1,2,3,4]
    }, {
        "orderable" : false,
        "targets" : [4]
    }],
    "drawCallback": function(){
        //此处可在表格每次重绘后进行某些操作
        //如给表格中的某些元素绑定一些事件等
    },
    "columns": [
        {"data":"id"},
        {"data":"name"},
        {"data":"type"},
        {
            "data":"status",
            "render":function(data, type, row, meta){
                var result = "";
                if(data == "SHOW"){
                    result = "展示中";
                }
                if(data == "HIDE"){
                    result = "隐藏";
                }
                return result;
            }
        },
        {
            "data":"id",
            "render":function(data, type, row, meta){
                var optStr = '<a class="show-opt" href="#" data-id="{0}">显示</a> | <a class="hide-opt" href="#" data-id="{1}">隐藏</a>';
                optStr = optStr.replace("{0}",data),replace("{1}",data);
                return optStr;
            }
        }
    ]
});

其中得先在页面中有个id为myTable的表格元素

<table>
    <thead>
        <tr>
            <th style="width: 20%;">序号</th>
            <th style="width: 20%;">名称</th>
            <th style="width: 20%;">类型</th>
            <th style="width: 20%;">状态</th>
            <th style="width: 20%;">操作</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

部分选项解释：

pagingType: 分页样式

simple - 只有上一页、下一页两个按钮
simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，默认值
full - 有四个按钮首页、上一页、下一页、末页
full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮

dom：表格元素展示的布局选项，一个字母代表一个元素

l - Length changing 改变每页显示多少条数据的控件
f - Filtering input 即时搜索框控件
t - The Table 表格本身
i - Information 表格相关信息控件
p - Pagination 分页控件
r - pRocessing 加载等待显示信息

columnDefs：列预定义一些属性
columnDefs.className：给列的元素加一个class，可通过这个class来控制这个列中元素的样式

ajax：表格数据异步请求的配置，其中的data数据为传给服务端的数据，dataSrc选项为指定服务端回传过来的数据中哪个字段的数据作为表格使用的数据

如服务端传回的数据为如下一个对象：

public class DataTablesViewPage<T> {

    private Integer draw;
    private Long recordsTotal;
    private Long recordsFiltered;
    private List<T> aoData;

}

DataTables在异步请求数据时会自带一些参数：draw(绘制次数)、start、length、order[i][column]，order[i][dir] (asc/desc) 等，服务端需要根据这些参数来查找处理数据返回正确的筛选数据，返回的数据中需要有如下参数：draw(同请求数据)，recordsTotal(总记录数)，recordsFiltered(过滤后的记录数)，data(数据源列表，如DataTablesViewPage类中的aoData属性，如果设为data属性则dataSrc可不用配置···)

columns：列配置
columns.data：指定该列的数据源，如dataSrc配置的服务端返回回来的数据源aoData数据中对象的某个属性值
columns.render：对数据进行处理后在展示

表格重绘函数：myTable.draw()

其他的具体一些选项和回调函数可以参考DataTables中文网的选项说明