前端插件：datatables的入门和使用

Datatables入门使用

一、引入相关的js和css文件

1、引用在线的CDN文件或者下载后在本地引用
2、由于datatables实在jquery基础上开发的插件，在引入datatables相关的JS和css，需要先引入jquery文件
3.两个文件分别是：

• js:jquery.dataTables.min.js
• css:jquery.dataTables.min.css

二、初始化表格

1.通过$()选定要操作的表格例如

 $(document).ready(function(){
        $('#myTable').DataTable();
    });

三、Datatables的使用的两种方式

1.通用简单配置：

（1）.在$('#myTable').DataTable({...});里面做简单的基础配置：

• 语言配置：配置中文

  language: {
                    "processing": "处理中...",
                    "lengthMenu": "显示 _MENU_ 项结果",
                    "zeroRecords": "没有匹配结果",
                    "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                    "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                    "infoFiltered": "(由 _MAX_ 项结果过滤)",
                    "infoPostFix": "",
                    "search": "搜索:",
                    "searchPlaceholder": "搜索...",
                    "url": "",
                    "emptyTable": "表中数据为空",
                    "loadingRecords": "载入中...",
                    "infoThousands": ",",
                    "paginate": {
                        "first": "首页",
                        "previous": "上页",
                        "next": "下页",
                        "last": "末页"
                    },
                    "aria": {
                        "paginate": {
                            "first": "首页",
                            "previous": "上页",
                            "next": "下页",
                            "last": "末页"
                        },
                        "sortAscending": "以升序排列此列",
                        "sortDescending": "以降序排列此列"
                    },
                    "thousands": "."
                }

• 保存当前数据信息，重载是直接调用
  "stateSave": true, "stateDuration": -1,
• 表格列信息配置：每列的数据都可以单独配置常见配置字段：data(必要)，orderable（是否开启排序），name(字段名字)，render(处理当前数据)

  columns: [{
                    data: 'id'
                }, {
                    data: 'name',
                    orderable: false
                }, {
                    data: 'email',
                    orderable: false
                }, {
                    data: 'title'
                }, {
                    data: "status",
                    render: function(data, type, row) {
                        return data > 0 ? "开启" : "禁用";
                    }
                }],

• 自定义列信息配置：(data:当前数据，type:数据格式，row:当前行数据集合)

"columnDefs": [{
"targets": 5,//自定义的列（数字标识第几列的索引，从0开始）
"render": function(data, type, row) {return '返回处理过的数据';}
 }],

1.1前端处理数据

• 前端处理数据一般用于数据小于1000条，在初始化datatables前先通过ajax获取数据(获取的json数据要转换成JSON.parse(res)数组)，赋值给datatables配置项中的data字段即可
  返回的数据类型是数组和对象两种不同配置方式请参考：
  http://datatables.club/manual/data/

1.2后端处理数据

(a)、前端配置：

• 后端处理数据一般用于数据量非常大时
• 跟前端配置不同的时：不需要配置data字段；
• 需要前端配置：serverSide:true；来开启后端配置
• 数据来源在ajax字段中配置：
  • url:请求地址
  • type:请求类型
  • dataType:返回数据类型
  • dataSrc:自定义数据接收的字段

(b)、后端接收参数和返回参数

1.接收参数字段：

• draw:前端求情唯一标识
• start:当前页数据的条目起始数
• length:页面的显示的条目数
• order:需要排序的信息：
  • column:需要排序的列的索引，一般通过索引(前端的列信息)获取需要排序的字段
  • dir:排序的规则：默认asc升序，desc降序
• search:搜索的的值
  2.后端返回的值(通过数据库相关查询操作获取前端的需要的值返回即可)；
  
  3.提示：特别注意前后端数据的配置