I have a Datatable that uses static data from an HTML file.

Using either the "columnDefs data" function, or the "columnDefs render" function, I can perform some output adjustment - blanking out some of the TD's based on their content, and their position on the currently displayed page (without altering the data source).

However, when a user changes the number of displayed rows, I then need to reset & redo my adjustments on the data, as different cells will now need blanking, and previously blanked entries may need showing again.

So, what I want to do is in the "length.dt" event (number of display rows just changed), call something that causes the Datatable to either re-render the entire table, or re-load the entire data (which would thereby call my columnDefs render or columnDefs data functions)

Is this possible? Or is my approach flawed and I need to find another way?

I have a Datatable that uses static data from an HTML file.

Using either the "columnDefs data" function, or the "columnDefs render" function, I can perform some output adjustment - blanking out some of the TD's based on their content, and their position on the currently displayed page (without altering the data source).

However, when a user changes the number of displayed rows, I then need to reset & redo my adjustments on the data, as different cells will now need blanking, and previously blanked entries may need showing again.

So, what I want to do is in the "length.dt" event (number of display rows just changed), call something that causes the Datatable to either re-render the entire table, or re-load the entire data (which would thereby call my columnDefs render or columnDefs data functions)

Is this possible? Or is my approach flawed and I need to find another way?

• javascript
• jquery
• datatables

• To clarify: you load some data, and modify the output using render. You now want to be able to 'reset' the data to the pre-rendered (ie unmodified) state? Is that correct? – markpsmith Commented Feb 3, 2016 at 13:01
• That's correct. Reset when the visible row count changes, so I can then modify the output from scratch. – Dave Commented Feb 3, 2016 at 13:09
• Using render modifies the data at the point of being rendered, hence it's name. There are a couple of things you could do - have a condition in render which modifies the output in one case, and shows unmodified data in another case. Alternatively look at 'fnRowCallback' which you can use the modify the data after the row has been rendered. Again there would have to be a conditional statement to determine what gets displayed. Or use jquery to modify the table after it's been rendered, then fnDraw() would reset it to an unmodified state. – markpsmith Commented Feb 3, 2016 at 13:27
• 1 Render, it would seem, only gets called once, when the table is first created. If I later do something, say change the number of rows displayed, render doesn't get called again. That's kinda what I'm looking for. A way to force render to occur again, thereby resetting the data its going to draw, when the number of rows change. – Dave Commented Feb 3, 2016 at 13:33
• Are you talking about the render at row level ie 'render': function (data, type, full, meta) {? This does get called every time the table is drawn -debug it or put an alert in to check this. – markpsmith Commented Feb 3, 2016 at 13:39

3 Answers 3

Use rows().invalidate() to invalidate data for all rows and draw() to redraw the table.

Please note that 'data' in rows().invalidate('data') is required if you use Javascript data structure (with data or columns.render options).

$('#your_table').DataTable()
   .rows().invalidate('data')
   .draw(false);

You can redraw the entire DataTable on the length.dt event.

$('#your_table').on('length.dt', function (){
     setTimeout(function() {
         //draw('page') redraws your DataTable and preserves the page where it was
         $('#your_table').DataTable().draw('page');
     }, 100);
});

Edit

Here you can see more info and other parameters to pass to the draw method: https://datatables.net/reference/api/draw%28%29

Use 'destroy': true.

$("#your_table").dataTable({
  'destroy': true
})