Datatables相关操作

Datatables是一款基于JQuery的一款表格插件，支持服务端分页和客户端分页两种模式。

1、基本使用

我使用的是在AdminLTE中的Datatables插件在使用之前需要引入jQuery.js、dataTables.bootstrap.min.css、dataTables.bootstrap.min.js、jquery.dataTables.min.js四个文件。引入之后在<script></script>标签中实例化表格即可。

$("table_elements").dataTable({})

2、一些配置项

    "processing" : true,//异步加载时候是否出现提示信息
    "serverSide" : true,//是否启用服务端为分页
    'paging'     : false,//是否开启分页
    'destroy'    : true,//是否摧毁当前已经实例化的表格
    'searching'  : false,//是否启用表头上的搜索框
    'info'       : false,//是否显示表格中的提示信息

3、汉化

Datatables是由外国人开发的一款插件，因此在显示的时候会出现英文的界面。因此我们需要对其进行汉化。

"oLanguage": {
         "sLengthMenu": "每页显示 _MENU_ 条记录",
         "sZeroRecords": "对不起，查询不到任何相关数据",
         "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条记录",
         "sInfoEmtpy": "找不到相关数据",
         "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
         "sProcessing": "正在加载中...",
         "sSearch": "搜索本表内容",
         "oPaginate": {
         "sFirst": "第一页",
         "sPrevious":" 上一页 ",
         "sNext": " 下一页 ",
         "sLast": " 最后一页 "
        },
      },

服务端分页

4、服务端分页

在进行服务段分页的时候时候通过ajax请求数据的。返回的数据类型必须是json格式。

ajax: function(data, callback, settings) {
        //默认的data是不支持自定义参数的，如果想传入自定义的参数可以这样设置
        data= {
        'aid' : aid,
        'start_date' : start_date,
        'end_date' : end_date
      };
        //封装请求参数
        var param = {};
        param.aid = data.aid;
        param.start_date = data.start_date;
        param.end_date = data.end_date;
        //ajax请求数据
        $.ajax({
            type: "POST",
            url: "/{{ session.appname }}/town_datas",
            cache: false,
            data: param,
            dataType: "json",
            success: function(result) {
                //请求成功以后进行数据的封装
                var returnData = {};
                returnData.data = result.data.town_transaction_report
                callback(returnData);
            }
        });
    },