插件datatables的使用说明

页面使用代码

$('#dynamicData').DataTable({
    responsive: true,
    "processing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
    "oLanguage": {
        "sUrl": "plugs/datatables/zh_CN.json"
    }
    "serverSide": true,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ],
    ajax: {
        url: '/api/data',
    }
});

---

说明：

服务端分页参数说明：  
start：记录开始索引 ，length：显示多少条   ，draw ：每点击分页一次+1，此参数不做处理，防止xss攻击 

数据返回默认是：data，总记录数：recordsTotal，过滤后的总条数:recordsFiltered

如果服务器端返回字段不是默认的，则需要使用如下方式指定：
ajax: {
        url: '/api/data',
        dataFilter: function(data){
            var json = jQuery.parseJSON( data );
            json.recordsTotal = json.total;
            json.recordsFiltered = json.total;
            json.data = json.list;

            return JSON.stringify( json ); // return JSON string
        }
    }


bServerSide ：开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的 数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。

"bSort": true, //开启排序功能，每一列都有排序功能，如果关闭了，排序功能将失效，也可以自定义排序功能。单个列的排序可以禁用“bSortable”选项。

bStateSave ：是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等。这样当终端用户重新加载这个页面的时候可以使用以前的设置

sScrollX ：是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用）


$('.datatable').dataTable({
    "oLanguage": {
        "sUrl": "/datatables/zh_CN.json"
    }
});

---

以下为说明：

$('#dynamicData').DataTable({
    responsive: true,
    "bAutoWidth": false,  //关闭后，表格将不会自动计算表格大小，在浏览器大化小化的时候会挤在一坨
    "processing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
    "bLengthChange": true, //默认true，开启一页显示多少条数据的下拉菜单，允许用户从下拉框(10、25、50和100)，注意需要分页(bPaginate：true)。
    "oLanguage" : {
        "sLengthMenu": "每页显示 _MENU_ 条记录",
        "sZeroRecords": "抱歉， 没有找到",
        "sInfo": "当前第 _START_ 至 _END_ 项记录 /共 _TOTAL_ 项数据",
        "sInfoEmpty": "没有数据",
        "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
        "sZeroRecords": "没有检索到数据",
         "sSearch": "查询:",
        "oPaginate": {
        "sFirst": "首页",
        "sPrevious": "前一页",
        "sNext": "后一页",
        "sLast": "尾页"
        }
    }
    /*"serverSide": true,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'office' }
    ],
    ajax: {
        url: '/api/data',
        dataFilter: function(data){
            var json = jQuery.parseJSON( data );
            json.recordsTotal = json.total;
            json.recordsFiltered = json.total;
            json.data = json.list;

            return JSON.stringify( json ); // return JSON string
        }
    }*/
});