DateTables使用技巧

1. 搜索功能

$('#myFilter').on('keyup',
  table.search(this.value).draw();
});

2. 表格加序号

//第一种
table.on('order.dtsearch.dt',function(){
  table.column(0, search:'applied',order:'applied'}).nodes().each(function(cell,i){
  cell.innerHTML=i+1;
});
}).draw();
//第二种
columns:[
{
data:function(row,type,set,meta){
    varc=meta.settings._iDisplayStart+meta.row+1;
    returnc;
}
},
{data:"name"},
{data:"position"},
{data:"office"},
{data:"age"},
{data:"startdate"},
{data:"salary"}
],

3. 页面加载时不发送请求

$(document).ready(function() {
  var table = $('#example').DataTable({
    columns: [
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "extn" },
      { "data": "start_date" },
      { "data": "salary" }
    ]
  });

  $('#reload').click(function() {
    if (table.ajax.url() == null) {
      console.log('a')
      table = $('#example').DataTable({
        ajax: "/ajax/objects.txt",
        destroy: true,
        columns: [
          { "data": "name" },
          { "data": "position" },
          { "data": "office" },
          { "data": "extn" },
          { "data": "start_date" },
          { "data": "salary" }
        ]
      });
    } else {
      table.ajax.reload();
    }
  })
});

4. 动态修改参数

//当你需要多条件查询，你可以调用此方法，动态修改参数传给服务器
function reloadTable() {
    var name = $("#seName").val();
    var admin = $("#seAdmin").val();
    var param = {
        "obj.name": name,
        "obj.admin": admin
    };
    table.settings()[0].ajax.data = param;
    table.ajax.reload();
}

5. ajax返回数据处理可接受后台数组类型

dataSrc: function (json) {
  return json;
}

6. 新增编辑, 修改列

columns: [
    {
        data: function (row, type, set, meta) {
            var c = meta.settings._iDisplayStart + meta.row + 1;
            return c;
        }
    },
    {data: "name"},
    {data: "position"},
    {data: "office"},
    {data: "age"},
    {data: "startdate"},
    {data: "salary"},
    {
        data: null,
        "defaultContent": "<button>修改</button><button>删除</button>"
    }
]