web-dev-qa-db-fra.com

Comment ajouter plusieurs lignes dans datatables jQuery

J'ai utilisé https://datatables.net/reference/api/rows.add%28%29 le lien fonctionne mais les données affichant le tableau sous la forme [object,object]. Comment montrer l'objet à la chaîne. J'ai utilisé JSON.stringify(obj) sa aussi ne fonctionne pas. 

HTML

<table id="exampleTable">
 <thead>
  <tr>
   <th>Year</th>
   <th>Month</th>
   <th>Savings</th>
  </tr>
 </thead>
 <tbody>
   <tr>
    <td>2012</td>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>2012</td>
    <td>February</td>
    <td>$80</td>
   </tr>
 </table>

JS

$('#addRows').click(); 

var table3 = $('#exampleTable').DataTable(); 

$('#addRows').on( 'click', function () { 
    table3.row.add(
       [ { "Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" },
         {"Year": "Tiger Nixon", "Month": "System Architect", "Savings": "$3,120" }]
    ).draw(); 
});
jqueryjquery-datatablesdatatables-1.10
13
Krishna

J'ai créé deux échantillons dans ce _ VIOLON .

Si vous voulez utiliser des objets dans les lignes add, vous devez ajouter des colonnes dans votre init datatable:

JS

var table3 = $('#exampleTable').DataTable({
    data:[{ "Year": "2012", "Month": "January", "Savings": "$100" },
      { "Year": "2012", "Month": "February", "Savings": "$80" }],
    columns:[{data: 'Year'},
        {data: "Month"},
        {data: "Savings"}]
});

mais si vous ne voulez pas faire cela, vous pouvez utiliser la syntaxe suivante dans les lignes, ajoutez:

JS

table4.rows.add(
   [[ "Tiger Nixon", "System Architect","$3,120" ],
     ["Tiger Nixon", "System Architect", "$3,120" ]]
).draw();

Regardez fiddle c'est plus informatif.

15
Baximilian

J'ai rencontré ce problème aussi - j'ai trouvé la documentation moins claire. Leur exemple sur https://datatables.net/reference/api/rows.add () ne fonctionne pas lorsque je passe mon propre tableau d'objets créé de manière dynamique.

Pour que cela fonctionne, vous devez spécifier les noms des colonnes lors de l'instanciation de DataTables.

Dans tous les cas, le ci-dessous est une solution de travail.

var DataTable = $('#tableName').DataTable({
  iDisplayLength: 15,   // number of rows to display
  columns: [
    { data: 'id' },
    { data: 'name' },
    { data: 'car' },
  ]
});

// assume this is a dynamically created array of objects
var persons = [
  {
    id: 1,
    name: 'John',
    car: 'Mercedes',
  }, 
  {
    id: 2,
    name: 'Dave',
    car: 'BMW',
  }, 
  {
    id: 3,
    name: 'Ken',
    car: 'Jeep',
  },  
];

DataTable.rows.add(persons).draw();
3
Puiu

Essayez ceci `

var data = [
  {id : 1, name : 'John'},
  {id : 2, name : 'Joe'},
  {id : 3, name : 'Mathan'},
  {id : 4, name : 'Mani'},
  {id : 4, name : 'Karthik'}
];

// Initialise la table de données

var DataTable = $('#tableName').DataTable({
 iDisplayLength: 15,  
 columns: [
 { data: 'id' },
 { data: 'name' },
 ]
});

DataTable.rows.add(data).draw();
1
Murali

Je retourne une vue comme dans une boucle foreach, elle retourne plusieurs lignes.ne vais maintenant ajouter dans datatable avec toutes les fonctionnalités qui fonctionnent de datatable.

cela ne fonctionne que lorsque vous obtenez des données au format html et uniquement au format de plusieurs lignes.

c'est mon datatable

   $('#SurveyDetails').dataTable({
    "scrollY": "500px",
    "scrollX": true,
    "scrollCollapse": true,
    "paging": false,
    "jQueryUI": false,
    "searching": false,
    "autoWidth": false,      
 });

j'ajoute 30 lignes sur le parchemin de datatable.

sur le succès de ajax: 

   success: function (data) {
            if (!$.trim(data) == '') {

                data = data.replace(/^\s*|\s*$/g, '');
                data = data.replace(/\\r\\n/gm, '');
                var expr = "</tr>\\s*<tr";
                var regEx = new RegExp(expr, "gm");
                var newRows = data.replace(regEx, "</tr><tr");
                $("#SurveyDetails").DataTable().rows.add($(newRows)).draw();
             }
0
Veer Jangid