DataTbles搭建及使用（一）

这篇文章的目的，是记录使用插件的经历，遇到的问题及解决。有些是测试同学测出来的，有些是产品提的需求。这个插件的文章会写两篇，第一篇是表格使用，第二篇增加CURD功能，官方这一块支持的也不错

插件链接

搭建

• 原始风格的插件，只需要三个文件，分别是jquery和插件本身的js、css，链接如下，要注意的是，jquery引用要在前面，因为插件用到了jquery；
  dataTables.bootstrap.min.css
  jquery
  jquery.dataTables.min.js
• 项目里用到的风格是bootstrap，以下是相关资源
  bootstrap.min.css
  dataTables.bootstrap.min.css
  jquery.js
  jquery.dataTables.min.js
  dataTables.bootstrap.min.js
• 下面就是使用的代码片段了

<!-- html页面上，其实只需要table即可，当然，你也可以在下面增加标题，table标签内的属性是必须的，删了会报错，手贱，删过。-->
<table id="example" class="display" cellspacing="0" width="100%">

//js代码如下
$("#table").DataTable({
        //表格每列对应的数据
        "columns": [{
            data: "table_id",
            orderable: false
        },],
        "order": [],
        //汉化
        "language": {
            "zeroRecords": "无数据",
            "info": "当前_PAGE_页，第_START_到_END_条，共 _TOTAL_条记录",
            "infoEmpty": "无数据",
            "infoFiltered": "",
            "infoPostFix": "",
            "paginate": {
                "next": "下一页",
                "previous": "上一页"
            }
        },
        //风格
        "dom": "tip",
        //后台请求，数据来源，可在这个方法里面像后台发起请求，解析数据，最后按照requireData格式将数据塞进去，调用callback方法
        "ajax": function (data, callback) {
            var requireData = {
                data: [],
                recordsTotal: 0,
                recordsFiltered: 0}
            callback(requireData);
        }
    })

数据来源

• 第一种直接写在html页面，使用tr标签，
• 第二种在初始化时，将数据塞到data（平行于ajax字段）字段里面，不推荐使用，便不给例子了，可以去官方找
• 第三种就像上面的代码，定义ajax字段，使用回调函数。
• 推荐使用第三种，两个理由，第一，刷新表格数据只有在定义ajax字段时，才能使用；第二，ajax字段支持分页；需要注意的是，data字段和ajax字段不能同时存在，表格只能由一个数据源

重新加载数据

• 页面肯定是需要刷新的，但dataTable不支持二次初始化，刷新数据应当使用下面的方法

$('#table').DataTable().table.ajax.reload();

• 对于通过查询框出来的表格，我一般定义某个标志位，来表示表格是否已经初始化，如果已经初始化，便重新加载数据。

分页

• ajax是一个方法，预设的参数有两个，其中data参数用于分页，data.start和data.length对应sql语句中的limit a,b两个参数，或者说是起始数和长度；callback是回调函数，填充表格数据。官方起始还提供了error等函数，我偷懒，将后台失败的情况，预先定义成了无数据，这也就是事先定义requireData对象的原因

"ajax": function (data, callback) {
            var requireData = {};
            requireData.recordsTotal = 0;
            requireData.recordsFiltered = 0;
            requireData.data = [];
            var param = {
                operator_type: $("#operator_type").val(),
                start_time: $("#start_time").val(),
                end_time: $("#end_time").val(),
                start: data.start,
                length: data.length,
            };
            var total = getAjax("/log/service/total", param, false)
            $.ajax({
                async: false,
                type: 'get',
                data: param,
                url: "/log/service/query",
                dataType: "json",
                success: function (json) {
                    requireData.data =json;
                    requireData.recordsTotal = total;
                    requireData.recordsFiltered = total;
                }
            })
            callback(requireData);
        }

着色

• 有时需要将一些列颜色设置为醒目的颜色，比如红色，dataTables也支持，操作比较方便

"fnRowCallback" : function(nRow, aData) {  
    if (aData[2] == "报警") {  
        $('td', nRow).css({  
            "background-color" : "#e10000",  
            "color" : "#fff"  
        });  
    } else {  
        $('td', nRow).css({  
            "background-color" : "#F9F9F9",  
        });  
    }  
},  

效果图