Question

I am using jQuery DataTable for product categories table For that I have to show nested categories according to depth of the category node.

e.g.

Parent1
- Child1
- Child2
Parent2
- Child3
  - Child4
- Child5

here I have two main categories Parent1 and Parent2 where these two also have child categories under them and also their childs under them. to show category table like wordpress+woocommerce

I have done something like this

$("#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 }
    ],
})

now this is perfect, Category with depth 2 will show two '-' in column of name but when I sort category with name column I don't want to show category name with '-'.

for that I have tried this code

$("#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');
    }
});

On sorting simply show category name with no '-'

Answer 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();
    }
});

Datatable on sort change column rendering option

1 个答案: