bootstrap-dataTable

  • ajax 取数据
$('#table').DataTable({
            //服务端处理分页
            "processing": true,//载入数据的时候是否显示“载入中”
            "serverSide": true,//分页,取数据等等的都放到服务端去
            'ajax': {
                "url": "../static/test/data.txt",
                "type": "POST"
            },
            "columns": [
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "start_date" },
                { "data": "salary" }
            ]
})

json格式
draw: 操作id?请求会携带draw,返回数据和请求一样,才加载那个数据,若返回数据不包含draw,则默认加载。
recordsTotal:数据总数

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    }]
}

post 默认data
draw 不是页数,操作id?
columns[] 表头th基本信息
start 当前页数据的offset参数
length 每页数量
order[0].column ->columns的index 排序字段
order[0].dir asc 排序

draw:1
columns[0][data]:first_name
columns[0][name]:
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:last_name
columns[1][name]:
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
columns[2][data]:position
columns[2][name]:
columns[2][searchable]:true
columns[2][orderable]:true
columns[2][search][value]:
columns[2][search][regex]:false
columns[3][data]:office
columns[3][name]:
columns[3][searchable]:true
columns[3][orderable]:true
columns[3][search][value]:
columns[3][search][regex]:false
columns[4][data]:start_date
columns[4][name]:
columns[4][searchable]:true
columns[4][orderable]:true
columns[4][search][value]:
columns[4][search][regex]:false
columns[5][data]:salary
columns[5][name]:
columns[5][searchable]:true
columns[5][orderable]:true
columns[5][search][value]:
columns[5][search][regex]:false
order[0][column]:0
order[0][dir]:asc
start:0
length:10 //每页数量
search[value]:  //搜索框值
search[regex]:false
bootstrap-dataTable_第1张图片
post data
  • ajax属性内配置可以重写发送的data
         'ajax': {
                "url": "../static/test/data.txt",
                "type": "POST",
                "dataSrc": "data",
                "data": function (data) {
                    var param = {};
                    debugger;
                    return parma;//重写的data
                }
            },
  • $("#table").DataTable().draw();重新请求数据,refresh
  • initComplete : function(setting, json)参数为datatable初始化方法
  • search
    全局搜索
    table.search(110004, true, true).draw();
    -> data.search.value = 110004
    某字段搜索
    table.column(2).search(110004, true, true).draw()
    -> data.column[2].search.value = 110004

你可能感兴趣的:(bootstrap-dataTable)