Datatable on sort change column rendering option

3
votes

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 '-'

1
javascriptjquerydatatables

1 Answers

1
votes

So I came up with this patch solution

I have created two columns for name in table

  • One with tree format
  • Another is simple category name (which is hide initially)

When I sort name column I hide my formatted column and show column with basic name

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