web-dev-qa-db-fra.com

Détruire et recréer un jQuery Datatables

J'ai deux tables de données jQuery avec traitement côté serveur. J'ai une case à cocher où je cache et affiche les deux tables. Je voudrais détruire le non affiché et créer un autre tableau. Comment je ferais ça?

C'est ce que j'ai essayé mais ajax.reload ne se déclenche pas.

if ($('#mode').is(':checked')) {
    Table2.ajax.reload();
    Table1.clear();
    Table1.destroy();
} else {
    Table1.ajax.reload();
    Table2.clear();
    Table2.destroy()
}

var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
jquerydatatablescreate-tabledestroy
6
fefe

comme je le vois, vous ne verrez jamais 2 tables de données dans votre page, alors pourquoi ne pas en utiliser qu'un seul ... vous pouvez initialiser votre serveur de données et utiliser une séquence comme celle-ci 

table.destroy();
$('#myTable').empty();
table = $('#myTable').DataTable( {
        columns: json.columns,
        data:    json.rows
});

pour le recréer au besoin.

1
Paun Narcis Iulian

Dans mon cas, pour réinitialiser le tableau, je fais juste ceci:

$('#table_id').DataTable().clear().destroy();
$('#table_id').empty();

Avec cela, vous réinitialisez la table à son état initial et vous pourrez la réinitialiser par la suite.

1
Untherxadyus

Vous pouvez essayer quelque chose comme ceci (Voici un violon qui pourrait aider)

function loadDataTable(type) {
  $('#dataTableDiv').empty();
  $('#dataTableDiv').append('<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example"> </table>');

  var table1_columnList = [{
    "data": "otherId",
    "title": "Other ID"
  }, {
    "data": "firstName",
    "title": "First Name"
  }, {
    "data": "lastName",
    "title": "Last Name"
  }, {
    "data": "gender",
    "title": "Gender"
  }];

  var table2_columnList = [{
    "data": "id",
    "title": "ID"
  }, {
    "data": "firstName",
    "title": "First Name"
  }, {
    "data": "lastName",
    "title": "Last Name"
  }, {
    "data": "gender",
    "title": "Gender"
  }, {
    "data": "dob",
    "title": "DOB"
  }, {
    "data": "race",
    "title": "Race"
  }];

  var columnList = "";

  if (type == 'table1')
    columnList = table1_columnList;
  else
    columnList = table2_columnList;


  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: datavar,
    columns: columnList,
    responsive: true,
  });

}
1
Anshika Kaythwas

Vous devez effacer le contenu div pour bien détruire

 if($('#mode').is(':checked')) {
      Table2 = $('#timesheet-table-2').DataTable({})
      Table1.clear();
      Table1.destroy();
      $('#timesheet-table').empty();
} 

else {
  Table1 = $('#timesheet-table').DataTable({})
  Table2.clear();
  Table2.destroy();
  $('#timesheet-table-2').empty();
}
1
DHARMENDRA SINGH

Vous pouvez essayer une solution de contournement simple, recharger la page et transmettre un indicateur ou un élément de la chaîne de requête que vous vérifiez au chargement de la page pour lui indiquer la table de données à charger.

En rechargeant la page, vous réinitialisez le DOM et détruisez essentiellement la table précédemment chargée. 

Par exemple:

$(document).ready( function {

var flag = getUrlVars()["flag"];

if(flag != 1) {

      Table2 = $('#timesheet-table-2').DataTable({})

} else {

      Table1 = $('#timesheet-table').DataTable({})

}

}


function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.Push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
0
DAmbrozic
if ($('#mode').is(':checked')) {
    Table2.ajax.reload();
    Table1.clear();
    Table1.destroy();
} else {
    Table1.ajax.reload();
    Table2.clear();
    Table2.destroy()
}

var Table1 = $('#timesheet-table').DataTable({
    ajax: "data.json";
})
var Table2 = $('#timesheet-table-2').DataTable({
    ajax: "data.json";
})

Vous devez fournir une URL ajax pour pouvoir utiliser la méthode table.ajax.reload().

0
Prateik Darji

selon ceci: https://datatables.net/reference/api/ajax.reload () ajax.reload () juste pour recharger les données du datatable depuis un flux distant, ne pas recharger le datatable lui-même

Je pense que vous devez faire quelque chose comme ça:

if($('#mode').is(':checked')) {

  Table2 = $('#timesheet-table-2').DataTable({})
  Table1.clear();
  Table1.destroy();

} else {
  Table1 = $('#timesheet-table').DataTable({})
  Table2.clear();
  Table2.destroy()
}



var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})
0
Daphoque