1、datatable的基本参数设置。
$("#table_onsale").DataTable({
data: onsaleCopyItemEntries,
columns: [
{data: ''numIid''},
{data: ''picPath''},
{data: ''newTitle''},
{data: ''price''},
{data: ''num''},
{data: ''comeFrom''},
{data: ''copyTime''},
{data: ''numIid''}
],
"columnDefs": [
{
"targets": 0,
"render": function (data) {
return ''<label><input type="checkbox" class="flat-red" name="num_iids" value="'' +
data + ''"></label>'';
}
},
{
"targets": 1,
"render": function (data, type, row) {
if (data != null) {
return ''<a href="https://item.taobao.com/item.htm?id='' + row.numIid + ''" target="_blank"><img src="''
+ data + ''" width="50" height="50"/>'';
} else {
return data;
}
}
},
{
"targets": 2,
"render": function (data, type, row) {
if (data != null) {
return ''<a href="https://item.taobao.com/item.htm?id='' + row.numIid + ''" target="_blank">''
+ data + ''</a>'';
} else {
return data;
}
}
},
{
"targets": 5,
"render": function (data) {
if (data == "taobao") {
return ''<img src="/dist/img/icon-tb.png" >'';
}
return ''<img src="/dist/img/icon-1688.png" >'';
}
},
{
"targets": 6,
"render": function (data) {
return new Date(data).Format("yyyy-MM-dd HH:mm E");
}
},
{
"targets": 7,
"render": function (data, type, row) {
return ''<a class="btn btn-primary btn-sm" '' +
''href="//upload.taobao.com/auction/publish/edit.htm?auto=false&itemNumId='' + data +
''" target="_blank">编辑</a>'';
}
}
],
//lengthMenu: [5, 10, 20, 30],
// 这里也可以设置分页,但是不能设置具体内容,只能是一维或二维数组的方式,所以推荐下面language里面的写法。
''processing'': true,
''paging'': true,
pagingType: ''full_numbers'',
''lengthChange'': true,
''searching'': true,
''ordering'': true,
''info'': true,
''autoWidth'': false,
''iDisplayLength'': 5,
''responsive'': true,
''aaSorting'': [[6, "desc"]],
language: {
lengthMenu: ''<select class="form-control input-xsmall">'' + ''<option value="5">5</option>''
+ ''<option value="10">10</option>'' + ''<option value="20">20</option>'' + ''<option value="30">30</option>''
+ ''<option value="50">50</option>'' + ''</select>条记录'', //左上角的分页大小显示。
search: ''<span class="label label-success">搜索:</span>'',//右上角的搜索文本,可以写html标签
searchPlaceholder: '''',
paginate: { //分页的样式内容。
previous: "上一页",
next: "下一页",
first: "第一页",
last: "最后"
},
zeroRecords: ''<img src="/dist/img/status-no-data.png" style="margin-top:50px;max-width:90px">''
+ ''<div style="margin-top:50px;"><span>您目前没有数据~</span></div>'', //table tbody内容为空时,tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ", //左下角的信息显示,大写的词为关键字。
infoEmpty: "0条记录", //筛选为空时左下角的显示。
infoFiltered: "" //筛选之后的左下角筛选提示,
},
"initComplete": function () {
}
});
2、创建一个重新加载datatable的function函数。
function reloadData(dataList) {
var currentPage = itemsModalTable.page();
itemsModalTable.clear();
itemsModalTable.rows.add(dataList);
itemsModalTable.page(currentPage).draw(false);
}
3、两个字段一样的datatable增加与删除
在id为table_onsale的的表格中增加一个与table_warehouse对应的数据
that为传入对应的datatable对象
$("#table_onsale").DataTable().row.add($(''#table_warehouse'').DataTable().row($(that).parents(''tr'')).data()).draw(false);
删除datatable中对应的对象属性
$(''#table_warehouse'').DataTable().row($(that).parents(''tr'')).remove().draw(false);', 2, '2018-04-05 10:15:18', 'zym', 1);