Question

I am using a jQuery DataTable on a site, but all the data in the table changes every time I press a different hyperlink. So rather than delete the rows and add them one by one, is there a way to dynamically remove the entire DataTable and recreate another one with all the data with an array.

The code here is just plan old static stuff but I know how to dynamically fetch the array, let’s say the array looks like this when I get it back from python/cherryPy:
ar[n]=[“col1″,”col2″,”col3″,”col4″,…”coln”] :

The code below is the static code for creating the DataTable in the HTML (static)…

<div id="div1" class="ctnr">
   <table id="mainTable1" class="dtable" cellpadding="3" cellspacing="1" border="0">
    <thead>
        <tr><th>*</th><th>Proposal</th><th>Vote </th><th> For </th><th>dd</th><th>A</th></tr>
    </thead>
    <tbody id="tbdy"> 
       <tr id="zrow1" class="gradeX"><td><input id="ckb1" type="checkbox" class = "tb" /></td><td id="ppl1" class="ppsal" style="width:55%">BlaBlaBla</td><td>More BlaBlaBla</td><td class="ralign"> CheeCheeChee</td><td class="ralign"> ChooChoo...</td><td class="ralign"> LaLaLa</td></tr>
    </tbody>
  </table>
</div>

How would I do this in JavaScript or jQuery?

Dennis

Answer 1

DataTables lets you define the structure and data of the table programmatically using what they call “data sources“.

There are a few examples in the documentation. I’m not sure which one will suit you but here are a few to get you started:

• DataTables dynamic creation example (uses a JS array)
• DataTables AJAX source example (uses a JS array through AJAX)

You could combine that with the bDestroy() method to avoid recreating the <table> tag.

A different approach would be to re-set the rows without recreating the table. There is no setData() method that I know of, but you could use the fnClearTable() and fnAddData() methods to achieve the same result. You can read more about these methods in the DataTables API docs.