it-swarm-id.com

Redraw datatables setelah menggunakan ajax untuk me-refresh konten tabel?

Saya menggunakan Datatables dan memiliki tombol pada halaman yang me-refresh tabel menggunakan AJAX. Supaya jelas tabel tidak menggunakan sumber data ajax, kami hanya menggunakan ajax untuk menyegarkannya hanya bila diperlukan. Ajax me-refresh div yang dibungkus tabel. Saya tahu saya kehilangan tombol pagination dan kemampuan penyaringan karena tabel perlu digambar ulang tetapi saya tidak yakin bagaimana menambahkan ini ke dalam kode inisialisasi tabel.

Kode yang dapat didata

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
        ]

    });
});

Kode ajax adalah ini

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

Saya mencoba ini tetapi tidak berhasil

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

Tampaknya Anda dapat menggunakan fungsi API untuk

  • kosongkan tabel (fnClearTable)
  • tambahkan data baru ke tabel (fnAddData)
  • redraw the table (fnDraw)

http://datatables.net/api

PERBARUI

Saya kira Anda menggunakan DOM Data Source (untuk pemrosesan sisi server) untuk menghasilkan tabel Anda. Saya tidak benar-benar mengerti pada awalnya, jadi jawaban saya sebelumnya tidak akan berhasil untuk itu.

Untuk membuatnya berfungsi tanpa menulis ulang kode sisi server Anda:

Apa yang perlu Anda lakukan adalah menghapus tabel lama (di dom) dan menggantinya dengan konten hasil ajax, kemudian menginisialisasi ulang data yang dapat didatangkan:

// 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
swatkins

Coba hancurkan datatable dengan bDestroy: true seperti ini:

$("#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 pertama-tama akan menghancurkan dan datatable instance yang terkait dengan pemilih itu sebelum menginisialisasi ulang yang baru.

13
Keith.Abramo

Saya tidak yakin mengapa. Tapi

oTable6.fnDraw();

Bekerja untukku. Saya letakkan di baris berikutnya.

7
jairobg

Gunakan ini:

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

atau

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

Untuk pengguna DataTables modern (1,10 ke atas), semua jawaban dan contoh di halaman ini adalah untuk api lama, bukan yang baru. Saya mengalami kesulitan menemukan contoh yang lebih baru tetapi akhirnya menemukan posting forum DT ini (TL; DR untuk kebanyakan orang) yang membawa saya ke contoh singkat ini

Kode contoh berfungsi untuk saya setelah saya akhirnya melihat sintaks pemilih $ () segera mengelilingi string html. Anda harus menambahkan simpul, bukan string.

Contoh itu benar-benar layak dilihat tetapi, dalam semangat SO, jika Anda hanya ingin melihat potongan kode yang berfungsi: 

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

Pembaca yang berhati-hati mungkin mencatat bahwa, karena kita hanya menambahkan satu baris data, table.row.add (...) itu akan berfungsi dengan baik dan berhasil untuk saya.

2
Anne Gunn

Dalam penggunaan inisialisasi:

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

Dan kemudian gunakan:

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

Hal penting dalam fnServerData adalah:

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

jika Anda mendorong langsung ke aoData, perubahan itu permanen saat pertama kali Anda menggambar tabel dan fnDraw tidak berfungsi seperti yang Anda inginkan.

1
laromicas

Ini bekerja untuk saya

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
Imran Rashid

Ini adalah cara saya memberi makan meja saya dengan data yang diambil oleh ajax (tidak yakin apakah ini adalah praktik terbaik yang sulit, tetapi rasanya intuitif dan berfungsi dengan baik):

/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
    'sPaginationType': 'full_numbers',
    'bLengthChange': false,
    'aaData': [],
    'aoColumns': [{"sTitle": "Tables"}],
    'bAutoWidth': true
} );


 /*retrieve data*/
function getArr( conf_csv_path )
{
    $.ajax
    ({
        url  : 'my_url'
        success  : function( obj ) 
        {
            update_table( obj );
        }
    });
}


/* build table data */
function update_table( arr )
{        
    oTable1.fnClearTable();
    for ( input in arr )
    {
        oTable1.fnAddData( [ arr[input] );
    }                                
}
0
Igor L.