How to reload the datatable(jquery) data?

Question

How to reload the selected tab? Actually I have problem with reloading part. When I add my data I'll successfully saved in datatable but in id field in database it shows proper id, but when I add the detail its not shows id in datatable.

(before refresh the summary tab) here is example it shows something like this in datatable id patient husband age ...........so on... '' xyz abc 23....... so on...

(after refreshing manually) but when I refresh my page it show successfully..like this in datatable: id patient husband age ...........so on... 13 xyz abc 23 ....... so on...

But exactly I want when I add my detail it should automatically refresh the selected tab.

My code is below:

<button type="button"  a href="javascript:void(0);" onclick="fnClickAddRow();">Add Summary</button>

function fnClickAddRow(event) {

$('#table_scroll').dataTable().fnAddData( [

$('#patientt').val(),$('#husband').val(),$('#age').val(),$('#opu_no').val(),$('#date').val(),$('#proc').val(),$('#no_of_eggs').val(),$('#fert').val(),$('#et_date').val(),$('#et_day').val(),$('#et').val(),$('#fz').val(),$('#bioch_preg').val(),$('#clin_preg').val(),$('#fh').val(),$('#comment').val()

]);


var datastring = $(Form_summary).serialize();

$.ajax({
    type: "POST",
    url: "summaryajax.php",
    data: datastring, 
    success: function(response){

 alert(response);

    }
    });

I also tired this approach but no success.

I want my datatable to refresh the data

function fnClickAddRow(event) {

var datastring = $(Form_summary).serialize();

$.ajax({
    type: "POST",
    url: "summaryajax.php",
    data: datastring, 
    success: function(response){
       $('#table_scroll').dataTable().fnAddData( 
          [resposne, $('#patientt').val(), $('#husband').val(),$('#age').val(),
            $('#opu_no').val(), $('#date').val(),$('#proc').val(), $('#no_of_eggs').val(), 
            $('#fert').val(),$('#et_date').val(), $('#et_day').val(), $('#et').val(), 
            $('#fz').val(), $('#bioch_preg').val(), $('#clin_preg').val(), $('#fh').val(), 
            $('#comment').val() ]);
    }
});

score 28 · Answer 1 · edited Oct 13 '12 at 20:00

28

You can use a simple approach...

$('YourDataTableID').dataTable()._fnAjaxUpdate();

It will refresh the data by making an ajax request with the same parameters. Very simple.

edited Oct 13 '12 at 20:00

Sven

69,403
10
107
109

answered Oct 13 '12 at 19:56

Elior Cohen

281
3
2

1

Doesn't work for me; it makes the back-end call and gets the data but doesn't recreate the table itself. :( – Josh May 09 '14 at 15:06
2

dude, you are a major life saver! this works perfectly for me. +100 – Eman Jun 20 '14 at 18:34

score 19 · Answer 2 · answered May 03 '11 at 14:45

You could use this function:

function RefreshTable(tableId, urlData)
    {
      //Retrieve the new data with $.getJSON. You could use it ajax too
      $.getJSON(urlData, null, function( json )
      {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i=0; i<json.aaData.length; i++)
        {
          table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
      });
    }

Dont' forget to call it after your delete function has succeded.

Source: http://www.meadow.se/wordpress/?p=536

Great solution no need for FN... fnReloadAjax! – Sydwell Aug 26 '13 at 10:49 — Sydwell, Aug 26 '13 at 10:49

score 13 · Answer 3 · answered May 03 '12 at 13:50

Use the fnReloadAjax() by the DataTables.net author.

I'm copying the source code below - in case the original ever moves:

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
    if ( typeof sNewSource != 'undefined' && sNewSource != null )
    {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay( oSettings, true );
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams( oSettings, aData );

    oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable( oSettings );

        /* Got the data - add it to the table */
        var aData =  (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

        for ( var i=0 ; i<aData.length ; i++ )
        {
            that.oApi._fnAddData( oSettings, aData[i] );
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
        {
            oSettings._iDisplayStart = iStart;
            that.fnDraw( false );
        }

        that.oApi._fnProcessingDisplay( oSettings, false );

        /* Callback user function - for event handlers etc */
        if ( typeof fnCallback == 'function' && fnCallback != null )
        {
            fnCallback( oSettings );
        }
    }, oSettings );
}

/* Example call to load a new file */
oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' );

/* Example call to reload from original file */
oTable.fnReloadAjax();

fnReloadAjax() worked perfectly. I didn't find this solution anywhere. It keeps all active filter and sorting. Just perfect. — Rui Marques, Jul 10 '12 at 22:06
This is a good way of doing it. Works perfectly, but it seems to me that Elior Cohen's answer is better. The result is the same, but it doesn't require any kind of extra code, just a simple datatables method call. Go for $('YourDataTableID').dataTable()._fnAjaxUpdate(); — Felipe Leão, Jan 29 '14 at 19:22
In principle similar logic was added to DataTable v1.10.1 as [`ajax.reload()`](http://datatables.net/reference/api/ajax.reload%28%29). — dma_k, Jul 17 '14 at 14:49

score 8 · Answer 4 · answered Feb 21 '14 at 19:09

8

Simpler solution:

var dt = $('#table_scroll').dataTable();

$.getJSON(url, null, function (json) {
    dt.fnClearTable();
    dt.fnAddData(json.aaData);
    dt.fnDraw();
});

answered Feb 21 '14 at 19:09

Onur Yıldırım

32,327
12
84
98

The most elegant solution. Thanks. – Vyacheslav Nov 18 '15 at 09:37
The most elegant solution. Thanks. – Vyacheslav Nov 18 '15 at 09:37

score 6 · Answer 5 · edited Oct 13 '12 at 10:42

6

If anything works! Do this:

example:

<div id="tabledisplay"><table class="display" id="table"></table><table </div>

how to reload the table:

$('#tabledisplay').empty();
$('#tabledisplay').append("<table class=\"display\" id=\"table\"></table>");
initTable( "tablename");

initTable is just a method, that initialized the Table with getJSON.

edited Oct 13 '12 at 10:42

Toon Krijthe

52,876
38
145
202

answered Oct 13 '12 at 10:40

Masood Moshref

370
4
9

This is the only solution that worked for me (sort of). – Josh May 09 '14 at 15:25

score 3 · Answer 6 · answered May 09 '14 at 15:29

None of these solutions worked for me, but I did do something similar to Masood's answer. Here it is for posterity. This assumes you have <table id="mytable"></table> in your page somewhere:

function generate_support_user_table() {
        $('#mytable').hide();
        $('#mytable').dataTable({
            ...
            "bDestroy": true,
            "fnInitComplete": function () { $('#support_user_table').show(); },
            ...
        });
}

The important parts are:

bDestroy, which wipes out the current table before loading.
The hide() call and fnInitComplete, which ensures that the table only appears after everything is loaded. Otherwise it resizes and looks weird while loading.

Just add the function call to $(document).ready() and you should be all set. It will load the table initially, as well as reload later on a button click or whatever.

score 2 · Answer 7 · edited Mar 19 '14 at 19:39

2

I'm posting this just in case someone need it..

Just create a button:

<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button>

but don't forget to add this when calling the datatable:

mytable = $("#mytable").dataTable();

edited Mar 19 '14 at 19:39

Alexander Farber

21,519
75
241
416

answered Apr 03 '13 at 19:58

iguider

721
1
12
25

It won't work if the `dataTable` has already been initialized. It will throw an exception in that case. – Kamran Ahmed Nov 20 '13 at 11:11

score 2 · Answer 8 · answered Mar 21 '12 at 07:07

2

// Get the url from the Settings of the table: oSettings.sAjaxSource

function refreshTable(oTable) {
    table = oTable.dataTable();
    oSettings = table.fnSettings();

    //Retrieve the new data with $.getJSON. You could use it ajax too
    $.getJSON(oSettings.sAjaxSource, null, function( json ) {
        table.fnClearTable(this);

        for (var i=0; i<json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}

answered Mar 21 '12 at 07:07

Martin

21
1

2

have you ever heard of for(var i in json.aaData) – Adam Fowler Mar 21 '12 at 16:37
What is this needed for? `oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();` – Snekse Sep 17 '13 at 14:24

score 1 · Answer 9 · edited Aug 06 '15 at 20:49

1

To reload the table data from Ajax data source, use the following function:

dataTable.ajax.reload()

Where dataTable is the variable used to create the table.

var dataTable = $('#your_table_id').DataTable({
     ajax: "URL"
});

See ajax.reload() for more information.

edited Aug 06 '15 at 20:49

Gyrocode.com

57,606
14
150
185

answered Aug 06 '15 at 20:40

Pablo Palladino

44
1

score 1 · Answer 10 · edited May 23 '17 at 11:53

1

For the newer versions use:

var datatable = $('#table').dataTable().api();

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Taken from: https://stackoverflow.com/a/27781459/4059810

edited May 23 '17 at 11:53

Community

1
1

answered Dec 14 '15 at 21:39

ChrisE

376
4
14

How to reload the datatable(jquery) data?

10 Answers10

Linked