Unable to make 'data-order' attribute work correctly

jcollognat

Link to test case: http://jsfiddle.net/tgsbqr8k/1/
Debugger code (debug.datatables.net): /
Error messages shown: /
Description of problem:

Hello,

i want to set data-order attribute after initialization. The cells are firstly empty, then their values are dynamically set after a http request (i directly populated cells from a JS object in my test case).

I set value and data-order on each cells once this request is done, then each cell's cache is cleared and the table is drawed.
But after that the order doesn't work as expected : it is not not based on data-order attribute as you can see.

In my example, the employees should be ordered by their lastname.

I hope my question is well explained (sorry for my english), a test case is linked to this topic.
Thanks in advance for your help !

Jérôme

kthorngren

When Datatables initialize it looks for the HTML5 data attributes to use for sorting, etc. It won't start using them later as you change the data. Start with setting the attribute to a default value, like this:
http://jsfiddle.net/zs2cdk47/

This will indicate to Datatables to use the data attributes for sorting.

Kevin

allan

i want to set data-order attribute after initialization

You can't I'm afraid. DataTables detects is automatically at initialisation.

What I would suggest you do in this case is use DataTables orthogonal data support e.g.:

let table = $('#example').DataTable({
  data: employees,
  columns: [
    {
      data: {
        _: 'val',
        type: 'order',
        sort: 'order',
      },
    },
  ],
});

http://jsfiddle.net/tupjzhf0/

That is functionally the same as:

let table = $('#example').DataTable({
  data: employees,
  columns: [
    {
      data: null,
      render: function (d, type) {
        return type === 'type' || type === 'sort'
          ? d.order
          : d.val;
      }
    },
  ],
});

Allan

jcollognat

Thanks for your replies and time.
I tried your suggestions but both doesn't work with my code. Alan's suggestion gives me an error (m is undefined).

The difference between the initial test case and my code is that array's cells are built using data property and createdCell callback.

I updated the test case with my initialization :
http://jsfiddle.net/Lyhukwjb/4/

Thanks
Jérôme

kthorngren

Seems very complex. Does the classList change or is it the same for all rows?

If you inspect the table the <span class="employee_display"></span> is overwritten by the data added to the table. Is the span necessary?

If the class name is the same then use columns.className. Update Allan's example to show this:
http://jsfiddle.net/twxLkjg1/

If the class name might change maybe you can restructure the employees data to contain the class names for each employee then use columns.createdCell to apply the class names.

Kevin

jcollognat

Hello !

Yes it's a bit complex.
I ended up using orthogonal data to init the order attribute.
Then I update it later when all data is fetched (using data() API). It works like a charm !

Thank you a lot for your help and suggestions !
Jérôme