美文网首页
bootstrap-dataTable

bootstrap-dataTable

作者: battle_ | 来源:发表于2018-04-24 09:07 被阅读124次
    • 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

    相关文章

      网友评论

          本文标题:bootstrap-dataTable

          本文链接:https://www.haomeiwen.com/subject/eartgxtx.html