CODEWITHSUNDEEP
javascriptjquerydatatables
Kokesh
Kokesh

Reputation: 3263

How can I change data array in DataTables after initialization

I have a table, which gets dataform Javascript array. After the array gets changed, I want to change the data shown in the table without recreating it again. I start the table with 

$('#table').dataTable( {
                    "bPaginate": false,
                    "data": dataArray,
                    "columns": [
                        { "title": "....

Later on I will add one more record to dataArray, but want to preserve all the sorting, filters,... How do I redraw table with new contents of the dataArray?

Upvotes: 0

Views: 4856

Answers (2)

Birgit Martinelle
Birgit Martinelle

Reputation: 1889

If you are looking to add a new Row to your table you can take advantage of the add row API

  var table  = $("#table").DataTable();
  t.row.add( [
            "col 1 value" ,
            "col 2 value",
            ...
            "col 5 value"
        ] ).draw();

http://www.datatables.net/examples/api/add_row.html

Upvotes: 1

Control Freak
Control Freak

Reputation: 13243

  1. You need to reload the data to your datatable
  2. You need to redraw the table

You need to put all this code in your fnInitComplete function.

Like this:

$(document).ready( function() {
  $('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      alert( 'DataTables has finished its initialisation.' );
      if(...){
        //load the new array
        oSettings.aoData = newArray;          
        //redraw the table
        $(this).fnDraw();
      }
    }
  } );
} )

Upvotes: 1

Related Questions