Bagaimana cara memuat ulang / menyegarkan dataTable jQuery?

Saya mencoba menerapkan fungsionalitas di mana mengklik tombol di layar akan menyebabkan jQuery dataTable saya menyegarkan (karena sumber data sisi server mungkin telah berubah sejak dataTable dibuat).

Inilah yang saya miliki:

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

Tetapi ketika saya menjalankan ini, itu tidak melakukan apa pun. Apa cara yang tepat untuk menyegarkan dataTable saat tombol diklik? Terima kasih sebelumnya!

Anda dapat mencoba yang berikut ini:

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

Dengan DataTables versi 1.10.0, ini built-in dan mudah:

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

atau hanya

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

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

Hancurkan dulu datatable lalu gambar datatable tersebut.

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

Anda dapat menggunakan API DataTable ekstensif untuk memuatnya kembali ajax.reload()

Jika Anda mendeklarasikan datatable Anda sebagai DataTable()(versi baru), Anda perlu:

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

Jika Anda mendeklarasikan datatable Anda sebagai dataTable()(versi lama), Anda perlu:

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

Saya memiliki masalah yang sama, beginilah cara saya memperbaikinya:

pertama dapatkan data dengan metode pilihan Anda, saya menggunakan ajax setelah mengirimkan hasil yang akan membuat perubahan ke tabel. Kemudian hapus dan tambahkan data baru:

var refreshedDataFromTheServer = getDataFromServer();

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

berikut adalah sumbernya: https://datatables.net/reference/api/clear ()

Jawaban sederhana ini berhasil untuk saya

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

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

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

Jika Anda ingin menambahkan tombol reload / refresh ke DataTables 1.10, gunakan drawCallback .

Lihat contoh di bawah ini (Saya menggunakan DataTables dengan 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();
}

saya akan merekomendasikan menggunakan kode berikut.

table.ajax.reload(null, false); 

Alasannya, paging pengguna tidak akan disetel ulang saat memuat ulang.
Contoh:

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

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

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

   });
</script>

detail tentang ini dapat ditemukan di sini

Beginilah cara saya melakukannya ... Mungkin bukan cara terbaik, tapi jelas lebih sederhana (IMHO) dan tidak memerlukan plugin tambahan.

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

Catatan: Dalam pekerjaan saya dengan jQuery dataTable, terkadang jika Anda tidak memilikinya, <thead></thead><tbody></tbody>itu tidak berfungsi. Tapi Anda mungkin bisa bertahan tanpanya. Saya belum tahu persis apa yang membuatnya dibutuhkan dan apa yang tidak.

Coba hancurkan dulu datatable lalu atur lagi, misalnya

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

Jika Anda menggunakan atribut url, lakukan saja

table.ajax.reload()

Berharap itu membantu seseorang

Gunakan kode ini, ketika Anda ingin menyegarkan data Anda:

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

baik, Anda tidak menunjukkan bagaimana / di mana Anda memuat skrip, tetapi untuk menggunakan fungsi API plug-in, Anda harus menyertakannya di halaman Anda setelah Anda memuat pustaka DataTables tetapi sebelum Anda menginisialisasi DataTable.

seperti ini

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

DataTables Allan Jardine adalah plugin jQuery yang sangat kuat dan apik untuk menampilkan data tabular. Ini memiliki banyak fitur dan dapat melakukan sebagian besar dari apa yang Anda inginkan. Satu hal yang anehnya sulit, adalah bagaimana cara me-refresh konten dengan cara yang sederhana, jadi saya untuk referensi saya sendiri, dan mungkin untuk kepentingan orang lain juga, berikut adalah contoh lengkap salah satu cara jika melakukan ini:

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

Sumber

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

Ini berhasil untuk saya tanpa menggunakan 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++){
            //

.......}

Menurut bantuan DataTable , saya bisa selesai untuk tabel saya.

Saya ingin banyak database ke DataTable saya.

Misalnya: data_1.json> 2500 catatan - data_2.json> 300 catatan - data_3.json> 10265 catatan

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

jika menggunakan datatable v1.10.12 maka cukup memanggil .draw()metode dan meneruskan jenis gambar yang Anda butuhkan yaitu full-reset, pagemaka Anda akan menggambar ulang dt Anda dengan data baru

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

// lakukan beberapa tindakan

dt.draw('full-reset')

untuk lebih lanjut, lihat dokumen yang dapat diperbarui

Saya telah melakukan sesuatu yang berhubungan dengan ini ... Di bawah ini adalah contoh javascript dengan apa yang Anda butuhkan. Ada demo tentang ini di sini: 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');
    }
}

Anda harus menulis baris kode ini setelah melakukan operasi pembaruan.

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

Untuk kasus saya (Tabel Data 1.10.7) kode berikut berfungsi untuk saya;

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

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

Datatables clear (): Cukup hapus semua baris data dari tabel

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

    setInterval('autoRefresh()', 5000); 

menginisialisasi ulang datatable dengan init dan menulis ambil sebagai true ..done..so simple

misalnya.

TableAjax.init();
retrieve: true,