最近女程序狗们也开始钻研起来了搞直播,这两年直播这玩意儿是越来越火,躲都躲不掉。下面小女来介绍一下直播中遇到的各种蛋疼。(初来乍到,说的不到位的地方还请参考官方文件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进行刷新 }