How to reload refresh jQuery dataTable

Question

I am trying to implement functionality whereby clicking a button on the screen will cause my jQuery dataTable to refresh  as the server-side data source may have changed since the dataTable was created    Here s what I have     document  ready function             my-button   click function                 my-datatable   dataTable   fnReloadAjax                  But when I run this  it does nothing  What s the proper way to refresh the dataTable when the button is clicked  Thanks in advance

User · Answer

var ref       example   DataTable    ref ajax reload      If you want to add a reload refresh button to DataTables 1 10 then use drawCallback   See example below  I am using DataTables with bootstrap css   var ref      hldy tbl   DataTable            responsive   true           processing  true           serverSide  true           ajax                 url   get hotels php                type   POST                      drawCallback   function  settings                     lt li gt  lt a onclick  refresh tab    class  fa fa-refresh  gt  lt  a gt  lt  li gt    prependTo  div dataTables paginate ul pagination                       function refresh tab        ref ajax reload

User · Answer

I had done something that relates to this    Below is a sample javascript with what you need  There is a demo on this here  http   codersfolder com 2016 07 crud-with-php-mysqli-bootstrap-datatables-jquery-plugin     global the manage member table  var manageMemberTable   function updateMember id   null        if id               click on update button             updatebutton   unbind  click   bind  click   function                   ajax                   url   webdesign action update php                   type   post                   data   member id   id                   dataType   json                   success function response                        if response success    true                                                      removeMessages   html   lt div class  alert alert-success alert-dismissible  role  alert  gt                                    lt button type  button  class  close  data-dismiss  alert  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt                                    lt strong gt   lt span class  glyphicon glyphicon-ok-sign  gt  lt  span gt   lt  strong gt   response messages                                lt  div gt                                 refresh the table                          manageMemberTable ajax reload                                close the modal                             updateModal   modal  hide                           else                               removeMessages   html   lt div class  alert alert-warning alert-dismissible  role  alert  gt                                    lt button type  button  class  close  data-dismiss  alert  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt                                    lt strong gt   lt span class  glyphicon glyphicon-exclamation-sign  gt  lt  span gt   lt  strong gt   response messages                                lt  div gt                                 refresh the table                                                 manageMemberTable ajax reload                                close the modal                             updateModal   modal  hide                                                                           click remove btn       else           alert  Error  Refresh the page again

User · Answer

if data length  0               alert  empty                      MembershipTable  gt  tbody   empty                       MembershipTable   dataTable   fnDestroy                            MembershipTable info   empty                             MembershipTable length   empty                            MembershipTable paginate   empty                  html   lt tr gt  lt td colspan  20  gt  lt b gt No data available in Table lt  b gt   lt  td gt  lt  tr gt                   MembershipTable   append html                      else                   MembershipTable   dataTable   fnDestroy                    MembershipTable  gt  tbody   empty              for var i 0  i lt data length  i

User · Answer

I had the same problem  this is how i fixed it   first get the data with method of your choice  i use ajax after submitting results that will make change to the table  Then clear and add fresh data   var refreshedDataFromTheServer   getDataFromServer     var myTable       tableId   DataTable    myTable clear   rows add refreshedDataFromTheServer  draw      here is the source  https   datatables net reference api clear

User · Answer

reinitialise datatable with init and write retrieve as true   done  so simple  eg   TableAjax init    retrieve  true

User · Answer

Allan Jardine   s DataTables is a very powerful and slick jQuery plugin   for displaying tabular data  It has many features and can do most of   what you might want  One thing that   s curiously difficult though  is   how to refresh the contents in a simple way  so I for my own   reference  and possibly for the benefit of others as well  here   s a   complete example of one way if doing this    HTML   lt table id  HelpdeskOverview  gt     lt thead gt       lt tr gt         lt th gt   rende lt  th gt         lt th gt Rapporterad lt  th gt         lt th gt Syst Utr Appl lt  th gt         lt th gt Prio lt  th gt         lt th gt Rubrik lt  th gt         lt th gt Status lt  th gt         lt th gt   gare lt  th gt       lt  tr gt     lt  thead gt     lt tbody gt     lt  tbody gt   lt  table gt    Javascript  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 lt json aaData length  i                table oApi  fnAddData oSettings  json aaData i               oSettings aiDisplay   oSettings aiDisplayMaster slice        table fnDraw             function AutoReload       RefreshTable   HelpdeskOverview     Helpdesk ActiveCases noacceptancetest       setTimeout function   AutoReload      30000        document  ready function        InitOverviewDataTable      setTimeout function   AutoReload      30000         Source

User · Answer

well  you didn t show how where you are loading the scripts  but to use the plug-in API functions  you have to include it in your page after you load the DataTables library but before you initialize the DataTable   like this   lt script type  text javascript  src  jquery dataTables js  gt  lt  script gt   lt script type  text javascript  src  dataTables fnReloadAjax js  gt  lt  script gt

User · Answer

If you use the url attribute  just do  table ajax reload     Hopes it helps someone

User · Answer

Very Simple answer    quot  table name quot   DataTable   ajax reload null  false

User · Answer

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  lt  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

User · Answer

if  using datatable v1 10 12 then simply calling  draw   method and passing your required draw types ie full-reset  page then you will re-draw your dt with new data   let dt       my-datatable   datatable       do some action  dt draw  full-reset    for more check out datatable docs

User · Answer

Destroy the datatable first and then draw the datatable       table1   DataTable   destroy        table1   find  tbody   append   lt tr gt  lt td gt  lt value1 gt  lt  td gt  lt td gt  lt value1 gt  lt  td gt  lt  tr gt         table1   DataTable   draw

User · Answer

According to the DataTable help  I could done for my table   I want wanted multiple database to my DataTable  For example  data 1 json  gt  2500 records - data 2 json  gt  300 records - data 3 json  gt  10265 records  var table  var isTableCreated  false   if  isTableCreated  true        table destroy            Table   empty       empty in case the columns change   else     i     table       Table   DataTable            quot processing quot   true           quot serverSide quot   true           quot ordering quot   false           quot searching quot   false           quot ajax quot                  quot url quot    url                quot type quot    quot POST quot                quot draw quot   1               quot data quot   function  data                    data pageNumber    data start   data length                               quot dataFilter quot   function  data                    return JSON stringify data                               quot dataSrc quot   function  data                    if  data length  gt  0                        data recordsTotal   data 0  result count                      data recordsFiltered   data 0  result count                      return data                                    else                     return  quot  quot                                quot error quot   function  xhr  error  thrown                    alert thrown message                                   columns                 data   column 1                  data   column 2                  data   column 3                  data   column 4                  data   column 5

User · Answer

For my case  DataTables 1 10 7  following code works for me   let table     tableName  DataTable    table clear   draw       tableName  dataTable             Datatables clear    Simply remove all rows of data from the table

User · Answer

Try destroy datatable first then setup it again  example  var table    document  ready function         table       my-datatable   datatable           my-button   click function             table fnDestroy            table       my-datatable   dataTable

User · Answer

Use this code  when you want to refresh your datatable         my-button   click function             my-datatable   DataTable   clear   draw

User · Answer

var myTable       tblIdName   DataTable        myTable clear   rows add myTable data  draw     This worked for me without using ajax

User · Answer

you have to write this line of code after doing update operation       example   DataTable   ajax reload

User · Answer

function autoRefresh            table ajax reload null false            alert  Refresh     for test  uncomment            setInterval  autoRefresh     5000

User · Answer

You could use an extensive API of DataTable to reload it by ajax reload    If you declare your datatable as DataTable    new version  you need   var oTable       filtertable data   DataTable        to reload oTable ajax reload      If you declare your datatable as dataTable    old version  you need   var oTable       filtertable data   dataTable        to reload oTable api   ajax reload

User · Answer

This is how I do it    Maybe not the best way  but it s definitely simpler  IMHO  and doesn t require any additional plugins   HTML   lt div id  my-datatable  gt  lt  div gt    jQuery  function LoadData         var myDataTable       my-datatable   html   lt table gt  lt thead gt  lt  thead gt  lt tbody gt  lt  tbody gt  lt  table gt            table  myDataTable  dataTable             document  ready function             my-button   click LoadData       LoadData          Note  In my workings with jQuery dataTable  sometimes if you don t have  lt thead gt  lt  thead gt  lt tbody gt  lt  tbody gt  it doesn t work  But you might be able to get by without it  I haven t exactly figured out what makes it required and what doesn t

User · Answer

i would recommend using the following code   table ajax reload null  false      The reason for this  user paging will not be reset on reload  Example    lt button id  refresh  gt  Refresh  lt  button gt    lt script gt        document  ready function              table       my-datatable   DataTable                refresh   on  click   function                table ajax reload null  false                         lt  script gt    detail about this can be found at Here

User · Answer

This simple answer worked for me                         my-datatable   DataTable   ajax reload      ref https   datatables net forums discussion 38969 reload-refresh-table-after-event

User · Answer

With version 1 10 0 of DataTables  it is built-in and easy   var table       example   DataTable    table ajax reload      or just       example   DataTable   ajax reload     http   datatables net reference api ajax reload

[javascript] How to reload/refresh jQuery dataTable?

Examples related to javascript

Examples related to jquery

Examples related to datatables