排序更改列呈现选项上的数据表答案

【问题标题】：Datatable on sort change column rendering option排序更改列呈现选项上的数据表
【发布时间】：2016-12-09 12:46:31
【问题描述】：

我正在为产品类别表使用 jQuery DataTable 为此，我必须根据类别节点的深度显示嵌套类别。

例如

父母1
- 孩子1
- 孩子2
父母2
- 儿童3
  - 孩子4
- 孩子5

这里我有两个主要类别 Parent1 和 Parent2 ，这两个类别下也有子类别，还有他们的子类别。显示 wordpress+woocommerce 等类别表

我做过类似的事情

$("#category-listing-table").DataTable({
    processing: true,
    serverSide: true,
    "ajax": "/categories",
    "columns": [
        { "data": "id", orderable: false, searchable: false }, {
            "data": "name",
            "render": function(data, type, row) {
                var html = "";
                for (i = 1; i <= row.depth; i++) { html = html + "<strong>-</strong>&nbsp;"; }
                html = html + row.name;
                return [html].join('');
            }
        },
        { "data": "action", "orderable": false, "searchable": false }
    ],
})

现在完美了，深度为 2 的类别将在名称列中显示两个“-” 但是当我使用名称列对类别进行排序时，我不想用“-”显示类别名称。

为此我已经尝试过这段代码

$("#category-listing-table").DataTable({
    processing: true,
    serverSide: true,
    "ajax": "/categories",
    "columns": [
        { "data": "id", orderable: false, searchable: false }, {
            "data": "name",
            "render": function(data, type, row) {
                var html = "";
                for (i = 1; i <= row.depth; i++) { html = html + "<strong>-</strong>&nbsp;"; }
                html = html + row.name;
                return [html].join('');
            }
        },
        { "data": "action", "orderable": false, "searchable": false }
    ],
}).on('order.dt', function() {
    var order = table.order();
    if (order[0][0] === 1) {
        console.log('I tried so much here but don\'t know what to do now');
    }
});

在排序时只显示没有'-'的类别名称

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

所以我想出了这个补丁解决方案

我在表中为名称创建了两列

一个树格式
另一个是简单的类别名称（最初是隐藏的）

当我对名称列进行排序时，我会隐藏我的格式化列并显示具有基本名称的列

var table = $("#category-listing-table").DataTable({
    processing: true,
    serverSide: true,
    "ajax": "/categories",
    "columns": [
        { "data": "id", orderable: false, searchable: false }, {
            "data": "name",
            "render": function(data, type, row) {
                var html = "";
                for (i = 1; i <= row.depth; i++) { html = html + "<strong>-</strong>&nbsp;"; }
                html = html + row.name;
                return [html].join('');
            }
        }, {
            "data": "name", "visible": false
        },
        { "data": "action", "orderable": false, "searchable": false }
    ],
}).on('order.dt', function() {
    /**
     * Column order information
     *
     * order[0][0] column id
     * order[0][1] column order type
     * @object
     */
    var order = table.order();

    // if the column is name
    if (order[0][0] === 1) {
        table.column(1).visible(false);
        table.column(2).visible(true).order(order[0][1]).draw();
    }
});

【讨论】：