How to Reload/Refresh Jquery Datatable

How to reload/refresh jQuery dataTable?

You can try the following:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.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();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

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

Datatable refresh on button click

Please look at this demo codepen

var table = $('#userInventory').dataTable();
table.ajax.reload();

Makes sense only when u supply 'ajax' property to datatable when creating it, so that it can reload.

look at this for datatable ajax documentation

$(document).ready(function () {

  var uitable = $('#userInventory').DataTable({
    //data : instdata,
    ajax: {
      type : "POST",
      url : href + "/refreshInstanceList",
      data : {"action":"get"},
      async: false,
      cache: false,
    },
    columns : [
      {
        "data" : "hostname",
        title : 'Hostname',
        "render" : function(data, type, row, meta) {
          return data;
        }
      }
    ],
    "initComplete": function() {
      $("#userInventory_filter").append('  <button type="button" onclick="refreshData()"><i class="fa fa-refresh"></i></button>');
    },
  });

  $('#some_button').click(function refreshData() {
    var table = $('#userInventory').dataTable();
    table.ajax.reload();

    //Or
    //uitable.ajax.reload();
  });
});

Hope this helps

Refresh jQuery datatable table

Try this

Initially you initialized the table so first clear that table

$('#myTable').dataTable().fnDestroy();

Then initialize again after ajax success

$('#myTable').dataTable();

Like this

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
       $('#myTable').dataTable().fnDestroy();
       $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

DEMO

Refresh DataTable without reloading page

The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.

             $(document).on('click','#ChangeNext',function(event){
                if(confirm("Are you sure changing status?")){
                    event.preventDefault();
                    var statusid = $(this).attr('data-id');
                    $.ajax({
                        url     : 'dbo.php',
                        method  : 'POST',
                        data    : {statusid : statusid},
                        success : function(data)
                        {
                            $('#exampleone').DataTable().ajax.reload();
                        }
                    });
                }
                else{
                    return false;
                }
            });

How do I reload/refresh javascript array in DataTables

You have to store your datatable in a variable and adding rows:
Look here:
https://jsfiddle.net/63235xk2/

$(document).ready(function ()
        {
            var dataSet = [];

            var datatable = $('#test').DataTable({
                data: dataSet,
                columns: [
                    { title: "Name" },
                    { title: "Position" },
                    { title: "Office" },
                    { title: "Extn." },
                    { title: "Start date" },
                    { title: "Salary" }
                ]
            });

      $('.asd').on('click',function(){
                dataSet = [
                    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
                    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
                    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
          ];

        alert(dataSet.length);

          datatable.clear();
          datatable.rows.add(dataSet);
          datatable.draw();
      });

        });

refresh or reload datatable

Ifound the answer:

clear the table ( fnClearTable )

add new data to the table ( fnAddData)

redraw the table ( fnDraw )

How to reload data in existing dataTable()?

<script> //I usually put the script section at the end of head tag

var table_1; //declare your table var here and initialize as a datatable inside document ready below.

$(document).ready(function() {

  table_1 = $('#table_1').DataTable( {
    dom: "Bfrtip",
    ajax: {
        url: "/get-data",  //path where json data will be served from. ex: get-data.php or my-data.json
        type: "POST"  //use POST to not have to deal with url encoding various characters
    },      
    serverSide: true,
    searchDelay: 2000,  // use this to throttle ajax requests when typing in search input 
    processing: true, // optional visual indicator that a search has been sent to backend
    lengthMenu: [ 10, 25, 50, 75, 100 ], // define per page limits. first value will be the default
    buttons: [
        "pageLength" // per page drop down button. i usually override/extend the default button
    ],      
    columns: [ // column definitions of json data fields
      { data: "status_id", title: "ID", width: "1%" },  // width:1% makes col width as small as possible
      { data: "status", title: "Status(hidden)", visible:false }, //visible:false hides column but allows you access to field data
      { data: "reason", title: "Reason and Status", render: function ( data, type, row ) { //render allows combining of fields into single column
        return data + ' <small>('+row.status+')</small>'; // data will be reason value. row.status is how you reference status value
      } },
      { data: "current", title: "Current", searchable:false }, //searchable: false set this field to not be used in search
      { data: null, title: "Button", render: function ( data, type, row ) { // use data:null if you need to render stuff in a column that does not necessarily need to be tied to a specific data value
        if(row.current){
          return '<button type="button" class="btn btn-secondary btn-sm status-edit" data-recid="'+ row.status_id +'" data-current="true"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Change</button>';
        }
        else{
          return '<button>Different Button</button>';
        }
      } },
    ],
    rowId: 'status_id' //sets the tr row id to the value in this column. useful for DOM and other manipulation later
  } );
}

</script>

<table id="table_1" class="table table-striped table-bordered table-sm" style="width:100%"></table>

<!-- If you define the title attributes in json column definitions above 
then you don't need to create html table headers/footers. 
Just an empty table tag will do. -->

Your ajax url will need to return data as JSON format with an array of objects:

[
  {
    "author": "KK2342",
    "up_to": "09/30/2017",
    "status": "Approved",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Close",
    "status_id": "479664"
  },
  {
    "author": "DD7822",
    "up_to": "09/30/2017",
    "status": "Close",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Process",
    "status_id": "479666"
  }
]

To get started create a file named testing.json with the above contents. Then replace table_1 ajax-url from above example to '/your_folder_path/testing.json'. This datatable should now load.

To get access to the data all you need to do is call:

table_1.data(); // datatables object
//OR
table_1.data().toArray(); // a simple array of objects with each rows data you can loop through

Docs on manipulating data for every row can be found here: https://datatables.net/reference/api/row().data()

After data has been modified you can table_1.draw() or table_1.reload() as @NawedKahn suggested - depending on your use case.

Tons of useful functionality can be found in Docs below

Everything you can do with datatables objects:
https://datatables.net/reference/api/

All datatables options:
https://datatables.net/reference/option/

Browse through these links before you try to build any sort of functionality, it probably already exists.

---

Related Topics