How do I update DataTables columns (and other properties) dynamically?

Question

There are a few questions here on SO about updating the columns in DataTables dynamically, but they all seem very out of date as they reference deprecated properties like aoColumns.

My code looks something like this:

var oTableOptions = {
    columns: [
        {title: "Column 1", data: "col1"},
        {title: "Column 2", data: "col2"},
        {title: "Column 3", data: "col3"}
    ],
    order: [
        [0, 'desc'],
        [1, 'asc']
    ],
    paging: false,
    searching: false,
    info: false
}

var dt = $('#tableId').DataTable(oTableOptions);

Couple of questions:

How do I update the default sorting order? If I want to dynamically change it to something like [[0, 'asc'], [1, 'asc']] instead (the next time the table is redrawn), how do I do this?

The following code doesn't work, so what am I missing?

dt.order = [[0, 'asc'], [1, 'asc']];
dt.ajax.reload();

How do I rename an existing column? I couldn't find any documented method for doing this. Is there one, or do I just have to use jQuery directly?
How do I add/remove columns?

codermapuche · Accepted Answer · 2014-09-21 21:23:38Z

4

var oTableOptions = {
    columns: [
        {title: "Column 1", data: "col1"},
        {title: "Column 2", data: "col2"},
        {title: "Column 3", data: "col3"},
        {title: "Column 4", data: "col4"}
    ],
    order: [
        [0, 'desc'],
        [1, 'asc']
    ],
    paging: false,
    searching: false,
    info: false
}

var dt = $('#tableId').DataTable(oTableOptions);

// Later...

var nTableOptions = {
    columns: [
        {title: "Column 1", data: "col1"},
        {title: "Column 2 n", data: "col2"}, // Rename
        {title: "Column 3", data: "col3"},
        {title: "Column 4", data: "col4"} // New
    ],
    order: [
        [0, 'asc'], // Change
        [1, 'desc'] // Change
    ],
    paging: false,
    searching: false,
    info: false,
    bDestroy: true // Add this property to new setting
}

var dt = $('#tableId').DataTable(nTableOptions);
// Or
var dt = $('#tableId').html("").DataTable(nTableOptions);

answered Sep 21, 2014 at 21:23

codermapuche

4825 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

soapergem Over a year ago

So in other words... destroy the entire table and re-draw it from scratch? That clearly isn't ideal, because that means I have to have all of the same initial table options available, in order to re-create the table. Do I really have to do something so drastic? I was hoping for some simpler way of just updating properties.

Collectives™ on Stack Overflow

How do I update DataTables columns (and other properties) dynamically?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related