DataTables adding data-order

Question

I'm trying to sort my table by adding data-order in createdCell callback - it's working fine but seems table cache is not updating after that - sorting by first column (date with timestamp in data-order) simply not working. I have tried table.rows/cells().invalidate() - no effect.

$.ajax({
            type: "POST",
            url: getLayoutData().urls.get_validation_history,
            data: {
                build_pk: build_pk,
                type: validation_type,
            },
            success: function(response){
                var response_data = JSON.parse(response);
                var table = $("#validationHistoryTable").DataTable({
                    data: response_data.snapshots,
                    destroy: true,
                    autoWidth: false,
                    columns: [
                        {data: 'updated'},
                        {data: 'updated_by'},
                        {data: 'type'},
                        {data: 'status'},
                        {data: 'comment'},
                    ],
                    columnDefs: [
                        {"width": "30%", "targets": 4},
                        {"targets": 0,
                         "createdCell": function(td, cellData, rowData, row, col){
                            raw = $(td).text().split(" ");
                            date = raw[0].split(".");
                            iso_time = date[2]+'-'+date[1]+'-'+date[0]+' '+raw[1];
                            $(td).attr('data-order', Date.parse(iso_time).getTime());
                         }
                        }
                    ],

davidkonrad · Accepted Answer · 2018-08-07 09:24:29Z

You cannot insert orthogonal data by manipulating nodes. You can manipulate existing and recognized data-* values through nodes and invalidate(), but not as part of the post processing of DOM nodes. Look at https://datatables.net/manual/data/orthogonal-data. data-* values can be specified by

Markup
A render literal that points to an alternative JSON property
A render callback

See proof of concept in this little example -> http://jsfiddle.net/rtu0bjz6/

{
  targets: 2,
  createdCell: function(td, cellData, rowData, row, col){
     counter++
     $(td).attr('data-order', counter)
  }   
}

Does not have any effect. The column is sorted by its original data, not its data-order. However, if you are using a render() function and return a special value upon type "sort" then it works as expected.

{
  targets: 3,
  render: function ( data, type, row, meta ) {
    return type == 'sort' ? meta.row : data
  }
}

So in your case, you could do something like (not tested) :

{
  targets: 0,
  render: function ( data, type, row, meta ) {
     if (type == 'sort') {
       var raw = data.split(" ");
       var date = raw[0].split(".");
       var iso_time = date[2]+'-'+date[1]+'-'+date[0]+' '+raw[1];
       return Date.parse(iso_time).getTime()
     } else {
       return data
     }
  }
}

Collectives™ on Stack Overflow

DataTables adding data-order

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related