JQuery dataTable nasıl yeniden yüklenir / yenilenir?

Ekrandaki bir düğmeyi tıklatmak jQuery dataTable'ımın yenilenmesine neden olacak işlevselliği uygulamaya çalışıyorum ( dataTable'ın oluşturulmasından sonra sunucu tarafındaki veri kaynağı değişmiş olabileceğinden).

İşte sahip olduğum şey:

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

Ama bunu çalıştırdığımda hiçbir şey yapmıyor. Düğme tıklandığında dataTable'ı yenilemenin doğru yolu nedir? Şimdiden teşekkürler!

Aşağıdakileri deneyebilirsiniz:

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

DataTables'ın 1.10.0 sürümüyle yerleşiktir ve kolaydır:

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

ya da sadece

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

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

Önce datatable'ı yok edin ve ardından datatable'ı çizin.

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

Yeniden yüklemek için kapsamlı bir DataTable API'sini kullanabilirsiniz. ajax.reload()

Datatable'ınızı DataTable()(yeni versiyon) olarak ilan ederseniz ihtiyacınız olan:

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

Datatable'ınızı dataTable()(eski sürüm) olarak beyan ederseniz, ihtiyacınız olan:

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

Ben de aynı sorunu yaşadım, bu şekilde düzelttim:

önce seçtiğiniz yöntemle verileri alın, tabloya değişiklik yapacak sonuçları gönderdikten sonra ajax kullanıyorum. Ardından temizleyip yeni verileri ekleyin:

var refreshedDataFromTheServer = getDataFromServer();

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

İşte kaynak: https://datatables.net/reference/api/clear ()

Bu basit cevap benim için çalıştı

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

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

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

Bir eklemek isterseniz yeniden / yenile düğmesine kadar DataTable 1.10 sonra kullanmak drawCallback .

Aşağıdaki örneğe bakın ( DataTables'ı bootstrap css ile kullanıyorum )

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

Aşağıdaki kodu kullanmanızı tavsiye ederim.

table.ajax.reload(null, false); 

Bunun nedeni, yeniden yükleme sırasında kullanıcı çağrıları sıfırlanmayacaktır.
Misal:

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

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

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

   });
</script>

bununla ilgili ayrıntı burada bulunabilir

Ben böyle yapıyorum ... Belki en iyi yol değil, ama kesinlikle daha basit (IMHO) ve herhangi bir ek eklenti gerektirmiyor.

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

Not: jQuery dataTable ile yaptığım çalışmalarda, bazen sizde yoksa <thead></thead><tbody></tbody>çalışmıyor. Ama onsuz da idare edebilirsin. Bunu neyin gerekli kılıp neyin gerektirmediğini tam olarak çözemedim.

Önce datatable'ı yok etmeyi deneyin, sonra tekrar kurun, örnek

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

Url özelliğini kullanırsanız, şunu yapın:

table.ajax.reload()

Birine yardım etmesini umuyor

Datatable'ınızı yenilemek istediğinizde bu kodu kullanın:

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

iyi, komut dosyalarını nasıl / nereye yüklediğinizi göstermediniz, ancak eklenti API işlevlerini kullanmak için, DataTables kitaplığını yükledikten sonra ancak DataTable'ı başlatmadan önce sayfanıza eklemeniz gerekir.

bunun gibi

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

Allan Jardine's DataTables, tablo şeklindeki verileri görüntülemek için çok güçlü ve kaygan bir jQuery eklentisidir. Birçok özelliği vardır ve isteyebileceğiniz şeylerin çoğunu yapabilir. Yine de ilginç bir şekilde zor olan bir şey, içeriğin basit bir şekilde nasıl yenileneceğidir, bu yüzden kendi referansım için ve muhtemelen başkalarının da yararına, işte bunu yapmanın tam bir yolu:

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

Kaynak

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

Bu benim için ajax kullanmadan çalıştı.

        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++){
            //

.......}

Göre DataTable yardım, masama için yapılır başladı.

DataTable'ım için birden fazla veritabanı olmasını istiyorum.

Örneğin: data_1.json> 2500 kayıt - data_2.json> 300 kayıt - data_3.json> 10265 kayıt

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

basitçe sonra Datatable v1.10.12 kullanarak çağırarak eğer .draw()yönteminizi ve gerekli beraberlik tipleri yani geçen full-reset, pageo zaman yeni veriyle dt yeniden çekecek

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

// biraz işlem yap

dt.draw('full-reset')

daha fazlası için verilebilir belgelere göz atın

Bununla ilgili bir şey yaptım ... Aşağıda ihtiyacınız olanı içeren örnek bir javascript var. Bu konuda bir demo var: 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');
    }
}

güncelleme işlemini yaptıktan sonra bu kod satırını yazmanız gerekir.

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

Benim durumum için (DataTables 1.10.7) aşağıdaki kod benim için çalışıyor;

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

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

Veri tabloları clear (): Tablodan tüm veri satırlarını kaldırmanız yeterlidir

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

    setInterval('autoRefresh()', 5000); 

init ile datatable'ı yeniden başlat ve doğru olarak geri al ..done..so basit

Örneğin.

TableAjax.init();
retrieve: true,