datables使用方法

关于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进行刷新
  }