Javascript 如何重新加载/刷新jQuery数据表？

我正在尝试实现这样的功能，即单击屏幕上的按钮将导致刷新（因为自创建dataTable以来，服务器端数据源可能已更改）

以下是我所拥有的：

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

---

但当我运行这个时，它什么也没做。单击按钮时刷新数据表的正确方法是什么？提前谢谢

您可以尝试以下操作：

函数InitOverviewDataTable（）{
oOverviewTable=$（'#HelpdeskOverview'）。数据表({
“bPaginate”：对，
“bJQueryUI”：对，//ThemeRoller stöd
“bLengthChange”：false，
“bFilter”：错误，
“bSort”：错误，
“宾福”：没错，
“bAutoWidth”：没错，
“bProcessing”：正确，
“iDisplayLength”：10，
“sAjaxSource”：“/Helpdesk/ActiveCases/noacceptancetest”
});
}
函数刷新表（tableId，urlData）{
$.getJSON（urlData，null，函数（json）{
table=$（tableId）.dataTable（）；
oSettings=table.fnSettings（）；
表.fnClearTable（本）；
for（var i=0；i

---

好的，您没有显示如何/在何处加载脚本，但是要使用插件API函数，您必须在加载DataTables库之后、初始化DataTable之前将其包含在页面中

像这样

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

---

我就是这样做的。。。也许不是最好的方法，但它绝对更简单（IMHO），并且不需要任何额外的插件

HTML

jQuery

函数LoadData（）{
var myDataTable=$（“#我的datatable”）.html（“”）；
$（“表”，myDataTable）.dataTable（{…}）；
}
$（文档）.ready（函数（）{
$（“#我的按钮”）。单击（加载数据）；
LoadData（）；
});

---

注意：在我使用jQuery dataTable的工作中，有时如果没有

，它就不起作用。但是没有它，你也许可以过得去。我还没有弄清楚什么是必需的，什么不是

对于DataTables的1.10.0版，它是内置的，并且非常简单：

var table = $('#example').DataTable();
table.ajax.reload();

或者只是

$（'#示例'）.DataTable（）.ajax.reload（）


Allan Jardine的DataTables是一个非常强大和灵活的jQuery插件
用于显示表格数据。它有很多特性，可以完成大部分功能
你可能想要的。但有一件事非常困难，那就是
如何以一种简单的方式刷新内容，所以我为我自己
参考资料，也可能是为了其他人的利益，这里有一个
完成此操作时的一种方法的完整示例：

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>


Ärende
报告员
Syst/Utr/Appl
普里奥
鲁布里克
地位
Ägare

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<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);
});

函数InitOverviewDataTable（）
{
oOverviewTable=$（'#HelpdeskOverview'）。数据表(
{
“bPaginate”：对，
“bJQueryUI”：对，//ThemeRoller stöd
“bLengthChange”：false，
“bFilter”：错误，
“bSort”：错误，
“宾福”：没错，
“bAutoWidth”：没错，
“bProcessing”：正确，
“iDisplayLength”：10，
“sAjaxSource”：“/Helpdesk/ActiveCases/noacceptancetest”
});
}
函数刷新表（tableId，urlData）
{
$.getJSON（urlData，null，函数（json）
{
table=$（tableId）.dataTable（）；
oSettings=table.fnSettings（）；
表.fnClearTable（本）；
对于（var i=0；i
if（data.length==0）{
警报（“空”）；
$（'#MembershipTable>tbody'）.empty（）；
//$（'#MembershipTable'）.dataTable（）.fnDestroy（）；
$（'#MembershipTable_info'）。空（）；
$（“#成员资格表_长度”）.empty（）；
$（“#成员身份表_paginate”）.empty（）；
html=“表中无可用数据”；
$（“#成员资格表”）.append（html）；
}
否则{
$（'#MembershipTable'）.dataTable（）.fnDestroy（）；
$（'#MembershipTable>tbody'）.empty（）；
例如，对于（var i=0；i请先尝试销毁datatable，然后再次设置它

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});

我也有同样的问题，我就是这样解决的：

首先使用您选择的方法获取数据，我在提交结果后使用ajax对表进行更改。然后清除并添加新数据：

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

资料来源如下：
您可以通过
ajax.reload（）

如果将datatable声明为
datatable（）
（新版本），则需要：

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

如果将datatable声明为
datatable（）
（旧版本），则需要：

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

如果要向DataTables 1.10添加重新加载/刷新按钮，请使用drawCallback

请参见下面的示例（我使用带有引导css的DataTables）

var ref=$（'hldy'u tbl'）。数据表({
“响应”：正确，
“处理”：对，
“服务器端”：正确，
“ajax”：{
“url”：“get_hotels.php”，
“类型”：“职位”
},
“drawCallback”：函数（设置）{
$（“
”）.prependTo（'div.dataTables_paginate ul.pagination'）；
}
});
函数刷新_选项卡（）{
ref.ajax.reload（）；
}
使用init重新初始化数据表，并将write retrieve设置为true..done

例如

根据帮助，我可以做我的桌子

我想在我的数据表中添加多个数据库

例如：data_1.json>2500条记录-data_2.json>300条记录-data_3.json>10265条记录

首先销毁数据表
var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

var ref = $('#example').DataTable();
ref.ajax.reload();

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

TableAjax.init();
retrieve: true,

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

//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('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}

                  $('#my-datatable').DataTable().ajax.reload();

    function autoRefresh(){
        table.ajax.reload(null,false); 
        alert('Refresh');//for test, uncomment
    }

    setInterval('autoRefresh()', 5000); 

table.ajax.reload()

table.ajax.reload(null, false); 

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });


let table = $(tableName).DataTable();
table.clear().draw();

$(tableName).dataTable({ ... });


$("#table_name").DataTable().ajax.reload(null, false);