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
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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容