web-dev-qa-db-fra.com

Les tables de données Jquery détruisent / recréent

J'essaie de recharger une table de données via un appel json. J'ai utilisé DataTables-1.10.9 et jquery-2.1.4.

J'ai essayé de payer avec l'API .ajax dans datatable et je suis arrivé nulle part, alors j'ai pensé essayer cette approche que j'ai poursuivie dans le passé.

Si je casse lorsque le code HTML a été ajouté à la table, cela semble OK (par cela, je veux dire que les anciennes données ont été supprimées et que les nouvelles données s'affichent. Mais lorsque $ ('# tblRemittanceList'). DataTable ( {...}); la commande est émise à nouveau, elle "recharge" les anciennes données, pas les nouvelles. Si je n'utilise pas de tables de données, le tableau brut affiche les données correctes.

//----------------------------------------------------------------------------------------
function fncOpenRemittancesRead(pFrRem,pToRem) {

    wsUrl = "../Json/OpenRemittances.asp"   +
                    "?qryDatabase="         + encodeURIComponent(wsDatabase)    +
                    "&qryFrRemittance=" + encodeURIComponent(pFrRem)            +
                    "&qryToRemittance=" + encodeURIComponent(pToRem);

    $('body').addClass('waiting');
    $.getJSON(wsUrl, function(data) {
        fncOpenRemittancesFill(data);
        $('body').removeClass('waiting');
    });
}

//----------------------------------------------------------------------------------------
function fncOpenRemittancesFill(pData) {
    var wsHtml = '';

    $('#tblRemittanceList tbody').empty();

    for (var i = 0; i < pData.length; i++) {
        wsHtml += '<tr>';
        wsHtml += '<td>' + trim(pData[i].col_1) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_2) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_3) + '</td>';
        wsHtml += '<td>' + fncFormatDate(pData[i].col_4,4) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_5,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_6) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_7,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_8) + '</td>';
        wsHtml += '</tr>';
    }

    $('#tblRemittanceList > tbody:last').append(wsHtml);

    $('#tblRemittanceList').dataTable({
          "autoWidth":false
        , "destroy":true
        , "info":false
        , "JQueryUI":true
        , "ordering":true
        , "paging":false
        , "scrollY":"500px"
        , "scrollCollapse":true
    });

}
javascriptjqueryajaxdatatables
17
Keith

CAUSE

Lorsque DataTables détruit la table en raison de l'option destroy:true, Il restaure le contenu d'origine et supprime le contenu que vous avez généré.

SOLUTION # 1

Supprimez l'option destroy:true Et détruisez la table avant de manipuler la table avec la méthode API destroy() .

if ( $.fn.DataTable.isDataTable('#tblRemittanceList') ) {
  $('#tblRemittanceList').DataTable().destroy();
}

$('#tblRemittanceList tbody').empty();

// ... skipped ...

$('#tblRemittanceList').dataTable({
      "autoWidth":false
    , "info":false
    , "JQueryUI":true
    , "ordering":true
    , "paging":false
    , "scrollY":"500px"
    , "scrollCollapse":true
});

SOLUTION # 2

Supprimez l'option destroy:true Et au lieu de détruire et de recréer la table, utilisez clear() pour effacer le contenu de la table, rows.add() = pour ajouter les données du tableau puis draw() pour redessiner le tableau.

Dans ce cas, vous devrez initialiser DataTables une fois à l'initialisation de la page.

58
Gyrocode.com

Vous pouvez initialiser vos tables de données à l'aide de l'option de récupération comme celle-ci:

var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true, ...

Ensuite, vous devez l'effacer et le détruire:

$('#myTable').DataTable().clear().destroy();

À la fin, vous recréez vos tables de données:

 var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true,

Consultez le tutoriel de récupération ici: https://datatables.net/reference/option/retrieve

6
Dierp
datatable refresh
$('#Clienttbl').dataTable().fnClearTable();
0
Jaydeepsinh Makwana

utilisez simplement la méthode destroy () pour détruire la table comme ceci:

$('#experience-table').DataTable().destroy();

et le réinitialiser comme cet exemple:

var table= $('#experience-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{url('employee/experience/list/experience')}}'+'/'+emp_id,
                    columns: [
                        { data: 'emp_no', name: 'emp_no' },
                        { data: 'position', name: 'position' },
                        { data: 'organization', name: 'organization' },
                        { data: 'duration', name: 'duration' },
                        { data: 'action', name: 'action' },
                    ],
                    searching: false


                });
0
Jasbin Karki