Soru Tablo içeriğini yenilemek için ajax'ı kullandıktan sonra verileri yeniden boyutlandırın.


Ben kullanıyorum datatables ve AJAX kullanarak tabloyu yenileyen sayfada bir düğme var. Tabloda ajax veri kaynağı kullanılmadığından emin olmak için sadece gerekli olduğunda yenilemek için ajax kullanıyoruz. Ajax, tablonun sarıldığı div'i yeniliyor. Tablo yeniden çizilmesi gerektiğinden, sayfalandırma düğümü ve filtreleme yeteneğimi kaybeddiğimi biliyorum, ancak bunu tablo başlatma koduna nasıl ekleyeceğimi bilmiyorum.

Datatables kodu

var oTable6;
$(document).ready(function() {
    oTable6 = $('#rankings').dataTable( {
        "sDom":'t<"bottom"filp><"clear">',
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [ 
            { "bSortable": false, "sWidth": "10px" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]

    });
});

Ajax kodu bu

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
        function( data ) { 
            $("#ajaxresponse").html(data);
        });
});

Bunu denedim ama işe yaramadı

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},

25
2017-10-19 09:15


Menşei


Tam datatables kodunuzun yanı sıra bununla ilgili html dosyasını da gönderebilir misiniz? - Keith.Abramo
Tablo için tüm başlatmayı göstermek için yukarıdaki kodu güncelledim - Anagio
@agunn neden kendi başınıza değil, o soruya verilen cevapla bağlantı kurmuyorsunuz? Bu sorudaki seçilen cevap stackoverflow.com/a/7890909/804087 - Anagio
Not: Modern datatables api (v1.10 ve üstü) kullanıcıları için aşağıda bir cevap yazdım (stackoverflow.com/a/40554137/165164) Bu varyasyonu kullanır. AFAICS, şu ana kadar bu soruya verilen cevapların tümü v1.9 ve önceki api sözdizimini kullanmaktadır. - Anne Gunn
@anagio, aşağıdaki cevabımla bağlantılıyım çünkü yeni DT api'ye atıfta bulunulan yeni bir cevap için bir işaretçiye sahip olmanın yararlı olduğuna inanıyorum. Başka bir SO post sorusuna / yanıtına başvurmadım çünkü modern DT 1.10 api sözdizimini kullanan bir tane bulamadım. Doğru seçimi yapıp yapmadığımı sorgulama hakkınızı takdir ediyorum ancak bana yorumumu gerçekten sildiniz. Kafam karıştı mı? Yorumumu silmekten ziyade cevabı silmek yerine SO'nın ruhunda olduğunu düşünmüyorum. - Anne Gunn


Cevaplar:


API işlevlerini kullanabilirsiniz.

  • tabloyu temizle (fnClearTable)
  • tabloya yeni veri ekle (fnAddData)
  • masayı yeniden çiz (fnDraw)

http://datatables.net/api

GÜNCELLEŞTİRME

Sanırım sen kullanıyorsun DOM Veri Kaynağı (sunucu tarafı işleme için) tablonuzu oluşturmak için. İlk başta bunu anlamadım, bu yüzden önceki cevabım bunun için çalışmayacak.

Sunucu tarafı kodunuzu yeniden yazmadan çalışmasını sağlamak için:

Yapmanız gereken şey, eski tabloyu (dom içinde) tamamen kaldırmak ve ajax sonuç içeriği ile değiştirmek, daha sonra datatable'ı yeniden başlatmaktır:

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
        "aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

    } 
    );
}

26
2017-10-25 14:32



Bunlardan üçünde hiç şanssız çalışıyorum. Ajax işlevinden önce clearTable'ı arayabilirim, eski verileri açık görüyorum. Sonra ajax işlevinden sonra fnDraw'ım var ve tabloyu yeniden çizmiyor. Ajax yanıtı sadece <table> değil diğer html'yi de içerir, bu yüzden özellikle #rankings tablosunu yeniden çizmem gerekiyor - Anagio
FnAddData işlevi bir dizi veri almıyormuş gibi görünüyor, HTML değil - swatkins
Peki bir tablo almak için ajax'ı kaydetmeden masamı yenilemek için var mı? - Anagio
Durumum için cevabımı güncelledim. Şunu ver. - swatkins


BDestroy ile veri tabanını yok etmeyi deneyin: bu gibi gerçek:

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
            function( data ) { 

                $("#ajaxresponse").html(data);

                oTable6 = $('#rankings').dataTable( {"bDestroy":true,
                    "sDom":'t<"bottom"filp><"clear">',
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
"aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

} 
);
            });

});

bDestroy: true, yenisini yeniden başlatmadan önce bu seçiciyle ilişkilendirilmiş ilk imha ve veri örneği olacaktır.


13
2017-10-25 18:30



Noob sorusu için özür dilerim, ancak tablodaki yeni verileri nasıl doldurdunuz? Bu $("#ajaxresponse").html(data); o? - newbie
Bu benim için çalışıyor. Spagetti içeriğimi ajax ile masaya alıyorum. Ve ekliyorum "bDestroy":true, parametrelere Bundan sonra, yüklenen her ajax içeriğinin başlatılması. thnx @ Keith.Abramo - caglaror


Neden olduğundan emin değilim. Fakat

oTable6.fnDraw();

Benim için çalışıyor. Bir sonraki hatta koyuyorum.


7
2018-03-04 15:47



Çünkü oTable6 kullanılarak başlatıldı $(element).dataTables() değil DataTables sınıf. - Afshin Mehrabani


Bunu kullan:

var table = $(selector).dataTables();
table.api().draw(false);

veya

var table = $(selector).DataTables();
table.draw(false);

3
2017-12-20 02:55





Modern DataTable'ların (1.10 ve üstü) kullanıcıları için, bu sayfadaki tüm cevaplar ve örnekler yeni değil, eski api içindir. Daha yeni bir örnek bulmakta çok zorlandım ama sonunda bu DT forum yazısı Beni (çoğu millet için DR; bu özlü örnek.

Sonunda, html dizesini hemen çevreleyen $ () seçici sözdizimini görüp sonunda örnek kod çalıştım. Bir dize değil bir düğüm eklemelisiniz.

Bu örnek gerçekten bakmaya değerdir, ancak SO'nın ruhuna göre, sadece çalışan bir kod parçasını görmek istiyorsanız:

var table = $('#example').DataTable();
  table.rows.add( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).draw();

Dikkatli okuyucu, yalnızca bir satırlık veri eklediğimizden, o table.row.add (...) 'ın da işe yarayacağını ve benim için yaptıklarını not edebilir.


2
2017-11-11 18:35





Bu benim için çalışıyor

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();

1
2018-03-14 13:37





Başlatma kullanımında:

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

Ve sonra sadece kullan:

$("#table_id").dataTable().fnDraw();

FnServerData'daki önemli şey:

    newData = aoData;
    newData.push({ "name": "key", "value": $('#value').val() });

doğrudan aoData'ya basarsanız, tabloyu ilk kez açtığınızda değişiklik kalıcıdır ve fnDraw istediğiniz şekilde çalışmaz.


1
2017-08-05 20:26