Làm cách nào để tải lại / làm mới jQuery dataTable?

Tôi đang cố gắng triển khai chức năng theo đó việc nhấp vào một nút trên màn hình sẽ làm mới jQuery dataTable của tôi (vì nguồn dữ liệu phía máy chủ có thể đã thay đổi kể từ khi dataTable được tạo).

Đây là những gì tôi có:

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

Nhưng khi tôi chạy nó, nó không làm gì cả. Cách thích hợp để làm mới DataTable khi nút được nhấp là gì? Cảm ơn trước!

Bạn có thể thử những cách sau:

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

Với phiên bản 1.10.0 của DataTables, nó được tích hợp sẵn và dễ dàng:

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

hay chỉ

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload ()

Bạn có thể sử dụng một API mở rộng của DataTable để tải lại nó bằng cách ajax.reload()

Nếu bạn khai báo dữ liệu của mình là DataTable()(phiên bản mới), bạn cần:

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

Nếu bạn khai báo dữ liệu của mình là dataTable()(phiên bản cũ), bạn cần:

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

Trước tiên hãy phá hủy dữ liệu và sau đó vẽ dữ liệu.

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

Tôi đã gặp vấn đề tương tự, đây là cách tôi sửa nó:

đầu tiên lấy dữ liệu với phương pháp bạn chọn, tôi sử dụng ajax sau khi gửi kết quả sẽ thay đổi bảng. Sau đó, xóa và thêm dữ liệu mới:

var refreshedDataFromTheServer = getDataFromServer();

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

đây là nguồn: https://datatables.net/reference/api/clear ()

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

Nếu bạn muốn thêm nút tải lại / làm mới vào DataTables 1.10 thì hãy sử dụng drawCallback .

Xem ví dụ bên dưới (Tôi đang sử dụng DataTables với bootstrap css)

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

Câu trả lời đơn giản này phù hợp với tôi

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

ref https://datatables.net/forums/discussion/38969/reload-refresh-table- after-event

tôi muốn khuyên bạn nên sử dụng mã sau.

table.ajax.reload(null, false); 

Lý do cho điều này, phân trang người dùng sẽ không được đặt lại khi tải lại.
Thí dụ:

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

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

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

   });
</script>

chi tiết về điều này có thể được tìm thấy tại Đây

Đây là cách tôi làm điều đó ... Có thể không phải là cách tốt nhất, nhưng nó chắc chắn đơn giản hơn (IMHO) và không yêu cầu bất kỳ plugin bổ sung nào.

HTML

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

Lưu ý: Trong quá trình làm việc của tôi với jQuery dataTable, đôi khi nếu bạn không có <thead></thead><tbody></tbody>thì nó không hoạt động. Nhưng bạn có thể vượt qua nếu không có nó. Tôi chưa tìm ra chính xác điều gì khiến nó bắt buộc và điều gì không.

Hãy thử phá hủy dữ liệu trước rồi thiết lập lại, ví dụ

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

Nếu bạn sử dụng thuộc tính url, chỉ cần làm

table.ajax.reload()

Hy vọng nó sẽ giúp ai đó

Sử dụng mã này khi bạn muốn làm mới dữ liệu của mình:

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

tốt, bạn đã không chỉ ra cách / nơi bạn đang tải các tập lệnh, nhưng để sử dụng các hàm API của trình cắm thêm, bạn phải đưa nó vào trang của mình sau khi tải thư viện DataTables nhưng trước khi bạn khởi chạy DataTable.

như thế này

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

DataTables của Allan Jardine là một plugin jQuery rất mạnh mẽ và mượt mà để hiển thị dữ liệu dạng bảng. Nó có nhiều tính năng và có thể làm hầu hết những gì bạn có thể muốn. Tuy nhiên, có một điều rất khó, đó là làm thế nào để làm mới nội dung theo cách đơn giản, vì vậy tôi để tham khảo cho riêng mình và có thể vì lợi ích của người khác, đây là một ví dụ đầy đủ về một cách nếu làm điều này:

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>

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

Nguồn

var myTable = $ ('# tblIdName'). DataTable (); myTable.clear (). row.add (myTable.data) .draw ();

Điều này làm việc cho tôi mà không cần sử dụng ajax.

        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

.......}

Theo trợ giúp DataTable , tôi có thể làm được cho bảng của mình.

Tôi muốn có nhiều cơ sở dữ liệu vào DataTable của mình.

Ví dụ: data_1.json> 2500 bản ghi - data_2.json> 300 bản ghi - data_3.json> 10265 bản ghi

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

nếu sử dụng datatable v1.10.12 thì chỉ cần gọi .draw()phương thức và chuyển các loại bản vẽ yêu cầu của bạn tức là full-reset, pagesau đó bạn sẽ vẽ lại dt của mình với dữ liệu mới

let dt = $("#my-datatable").datatable()

// thực hiện một số hành động

dt.draw('full-reset')

để biết thêm kiểm tra tài liệu có thể dữ liệu

Tôi đã làm một cái gì đó liên quan đến điều này ... Dưới đây là một đoạn javascript mẫu với những gì bạn cần. Có một bản demo về điều này ở đây: 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('<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');
    }
}

bạn phải viết dòng mã này sau khi thực hiện thao tác cập nhật.

$('#example').DataTable().ajax.reload();

Đối với trường hợp của tôi (DataTables 1.10.7) mã sau phù hợp với tôi;

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

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

Datatables clear (): Chỉ cần xóa tất cả các hàng dữ liệu khỏi bảng

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

    setInterval('autoRefresh()', 5000); 

reinitialise datatable với init và ghi truy xuất là true ..done..so đơn giản

ví dụ.

TableAjax.init();
retrieve: true,