Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2021

  The data isn't being loaded by ajax, there isn't an ajax property, which means you then can't reload it with ajax.reload(),

  You can just add that new row to the table with row.add():

  table.row.add((['1','2','3']).draw();
  

  Colin
• dee201 Posts: 4Questions: 1Answers: 0

  February 2021

  That makes sense, thanks for your help Colin!

  Is it possible to reload the entire table once original dataset has been modified, e.g.

  var dataSet = [
      [ "Tiger Nixon", "System Architect", "Edinburgh", ],
      [ "hello Nixon", "System Architect", "Edinburgh", ],
  ];
  var table
       $(document).ready(function() {
           table = $('#example').DataTable( {
               data: dataSet,
               columns: [
                   { title: "Name" },
                   { title: "Position" },
                   { title: "Office" },
                ],
                searching: false,
                paging: false,
                info: false
            } );
        } );
      
  // Update dataset 
  dataset = [ "new", "data", "test", ],
      [ "Nixon", "System", "Edinburgh", ],
  ]; 
      
  //Reload/redraw the table with new data
  table.reload() // Something like this?
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2021

  Use rows.add() to add multiple rows from an array, like this:

  // Update dataset
  dataset = [
      [ "new", "data", "test", ],
      [ "Nixon", "System", "Edinburgh", ],
  ];
       
  //Reload/redraw the table with new data
  table.rows.add( dataset ).draw().
  

  Note you are missing the leading g[ for the array.

  Kevin
• dee201 Posts: 4Questions: 1Answers: 0

  February 2021

  Hi Kevin,

  Thanks for your reply.

  I am actually trying redraw the entire table rather than add new rows to the existing table. So the new table should ideally contain only the new data (2 rows) if that makes sense. Do you know if this is possible?

  Cheers,
  Dee
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2021 Answer ✓

  If you are using the data option to initially load the table then use clear() to remove all the rows followed by the rows.add().

  Kevin
• glimpsed_chaos Posts: 140Questions: 30Answers: 4

  February 2021 Answer ✓

  It's also worth noting you may want/need to redraw the table after loading and that you can chain the clear, add and draw together.

  var data = JSON.parse(myData);
  var myTable = $('#my_table').DataTable().clear().rows.add(data).draw();
  
• dee201 Posts: 4Questions: 1Answers: 0

  February 2021

  Thanks for your help, the last two suggestions worked for me!