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",          });      }  },  

效果图