datables大致基本用法（蛋疼）

 最近女程序狗們也開始鑽研起來了搞直播，這兩年直播這玩意兒是越來越火，躲都躲不掉。下面小女來介紹一下直播中遇到的各種蛋疼。（初來乍到，說的不到位的地方還請參考官方文件http://datatables.club/）

 

關於datables的初始化：

首先html：

<table class="table table-striped table-bordered table-hover vm-table" >
　　<thead>
    　　<tr>
   　　 　　<th class="all-select">選擇 </th>
           <th> 商品圖片 </th>
           <th> 商品名稱 </th>
           <th> 價格 </th>
           <th> 所屬分組 </th>
           <th> 庫存 </th>
           <th> 總銷量 </th>
           <th> 創建時間 </th>
           <th> 操作 </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

然后css就不用管了 因為畢竟你引用了css還有js文件 相關文件在官網下載就行了

就是這些：（不要選  我這是圖片）

 

然后就是關鍵的js了：

if (table) {
    table.ajax.reload();//如果table已經拿到了數據，那么重新獲取數據~
  } else {
    table = $(".content-on-sale").find(".vm-table").DataTable({
      "language": {
        "processing": "<span class='text-primary'>正在加載中...</span>",
        "lengthMenu": "每頁顯示 _MENU_ 條記錄",
        "zeroRecords": "<span class='text-primary'>沒有數據</span>",
        "emptyTable": "<span class='text-primary'>沒有數據</span>",
        "info": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
        "infoEmpty": "顯示0到0條記錄",
        "infoFiltered": "數據表中共為 _MAX_ 條記錄"
      },
      "serverSide": true,
      "lengthChange": false,
      "pageLength": 20,
      "searching": false,
      "ordering": false,
      ajax: function (data, callback, setting) {
        $.ajax({
          "url": utils.ajaxUrl('/commodity/getCommodities'),
          "dataType": "json",
          "type": "get",
          "data": {
            draw: data.draw,
            page: Math.floor(data.start / data.length) + 1 || 1,
            status: 1,
            groupId: ajaxData1.groupId || undefined,
            searchContent: ajaxData1.searchContent || undefined
          },
          "cache": false,
          success: function (res) {
            if (res.code == '1') {
              console.log(res)
              var data = res.data;
              var dtData = {
                recordsTotal: data.recordsTotal,
                recordsFiltered: data.recordsTotal,
                data: data.records
              };
              if (data.draw) {
                dtData.draw = data.draw;
              }
              callback(dtData);
            }
          }
        })
      },
      columns: [
        {
          data: 'id',
          render: function (data) {
            return '<input type="checkbox" class="group-checkable"/>'
          }
        },
        {
          data: 'pics',
          render: function (data) {
            return data ? '<div class="pic"><img src="' + data + '"></div>' : ''
          }
        },
        {
          data: 'commodityName',
          render: function (data) {
            return data ? '<div class="commodityName">' + data + '</div>' : ''
          }
        },
        {
          data: 'newPrice',
          render: function (data) {
            return data ? '<div class="newPrice">' + data + '</div>' : ''
          }
        },
        {
          data: 'category.categoryName',
          render: function (data) {
            return data ? '<div class="categoryName">' + data + '</div>' : ''
          }
        },
        {
          data: 'stock',
          render: function (data) {
            return data ? '<div class="stocks">' + data + '</div>' : '0'
          }
        },
        {
          data: 'sells',
          render: function (data) {
            return data || data == 0 ? '<div class="sells">' + data + '</div>' : ''
          }
        },
        {
          data: 'inTime',
          render: function (data) {
            return data ? '<div class="inTime">' + moment(data).format('YYYY-MM-DD h:mm:ss') + '</div>' : ''
          }
        },
        {
          data: 'isDelete',
          render: function (data) {
            return '<a href="javascript:;" class="btn btn-sm blue editor"> 編輯<i class="fa fa-edit"></i></a><a href="javascript:;" class="btn btn-sm green off-line"> 下架 <i class="fa fa-link"></i></a>';
          }
        }
      ],
      "columnDefs": [{
        "targets": [0],
        "createdCell": function (td, cellData, rowData, row, col) {
          $(td).find('input').uniform()
        }
      }]

    })
  }
  function reloadAllTable() {
    table && table.ajax.reload();//對用來獲取數據的ajax進行刷新
  }