DataTables how to add them dynamically in jquery or javascript

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

what have you tried? looking for just a little input? try jquery's .html() function — Th0rndike
– Th0rndike, Commented Mar 19, 2012 at 14:55
I have looked at the DataTable forum and everyone seems to make a huge and complex reply for special cases. I just need a generic case. It has to be simple — DKean
– DKean, Commented Mar 19, 2012 at 15:08
Using json to populate is a pretty common approach. See stackoverflow.com/questions/9760661/… — dwerner
– dwerner, Commented Mar 19, 2012 at 15:21
Thanks, I am able to transport the data. That is not my worry. — DKean
– DKean, Commented Mar 19, 2012 at 20:05

jmlnik · Accepted Answer · 2012-03-19 15:28:57Z

6

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.

answered Mar 19, 2012 at 15:28

jmlnik

2,8972 gold badges19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DKean Over a year ago

You are the man Jonathan! Just what I wanted... Thanx. I'm not done, but I see the solution I need in "DataTables dynamic creation example "

Sarfraz Ahmad Over a year ago

I have added datatables to an element ` $("#element").dataTable()` now i want to remove the dataTable from this element. how can i do this. ??????

jmlnik Over a year ago

@SarfrazAhmad, you should have created a new question... What you're looking for is fnDestroy(): datatables.net/api

Sarfraz Ahmad Over a year ago

thank you Dotjon, I have created a new question also, see here [stackoverflow.com/questions/20427543/…'

Ande Caleb · Accepted Answer · 2017-12-12 16:19:05Z

hello i had the same issue... and this was how i solved it...

i had this function in a laravel controller... that loops and creates a table dynamically.. based on the $app_id variable... and i had to append the datatable to it... at runtime...

public function getAppUserProfile(Request $request){
    $app_id = $request['appId'];
    $configs = Userconfig::with('user')->where('config_id', $app_id)->get();
    $ct = 1;
    $str = '';
    foreach($configs as $config){

           // $config->user->id,
            $str .= '<tr><td>'. $ct.'</td><td>'.
                    $config->user->profile->first_name
                 .'</td><td>'.
                    $config->user->profile->first_name
                .'</td><td>'.
                    $config->user->profile->first_name
                .'</td></tr>';

            $ct++;
    }

    $tb = '<table id="testTable2" class="table table-striped table-bordered"><thead>';
    $tb .= '<tr><th>S/N</th><th>USER NAME</th><th>ASSIGN ROLE</th><th>Add</th></tr>'; 
    $tb .= '</thead><tbody>' . $str . '</tbody></table>';


    //return json_encode($configs);

}

the $str function is what holds the constructed table data... and i echo the table to the page directly into the div tag with id " panel_data_tb ", which is done on the javascript file..

function showAppUser() {
    $('.loading').css('display', 'block');
    var appID = $('#app_search').val();
    $.ajax({
        method: 'get',
        url: getauprofile,
        data: {appId: appID}
    })
        .done(function (result) {
           // alert('success '  + result);
           $('#panel_data_tb').html(result);
            $('.loading').css('display', 'none');


            //this line here is what initializes the datatable on the 
            //current table just being created... 
            //dynamically.. and it worked. perfectly for me.. 
            //******************************************************

            $('#panel_data_tb').find('table').DataTable();

            //*******************************************************


        });

}

the last line.. finds the table within the Div tag and initializes the datatable() property on it dynamically. so anytime you change the contents of the table, the datatable is re-initialized on the dynamic table being created..

i hope this helps. thanks.

Collectives™ on Stack Overflow

DataTables how to add them dynamically in jquery or javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related