DataTable基本使用参数介绍、加载、和修改

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);
上一篇:ORACLE 数据库用户备份及表备份


下一篇:c# DataTable获取某个列的集合