Mehrere Objekte in einem Array

Question

im nicht wirklich in jQuery, aber ich brauche, es zu lernen, so kann ich einige Projekte im verwirklichen arbeiten weiter.

Ich benutze Datentabellen mit dem select-Anschiebetisch-Reihen zu multiselect. Danach muss ich mit den Werten dieser Zeilen in PHP arbeiten. All das wirkt schon wie ein Zauber, Problem ist, dass ich nur einen Tisch innerhalb eines Formulars benutzen kann. Das heißt, ich bekomme nur die Ergebnisse der ersten Tabelle mit der Klasse "table_select" in eine $ _POST-Variable.

Ich habe versucht, den jQuery-Code so zu ändern, dass alle Objekte mit dieser Klasse iteriert werden, also habe ich ein Array erstellt und versucht, dieses Array mit [Array.length] zu pushen, bekomme aber nur Werte in Array [0].

Was mache ich falsch?

var table = []; 

table[table.length] = $('.table_select').DataTable({ 
    'initComplete': function(){ 
    var api = this.api(); 
    api 
     .rows() 
      .every(function(){ 
      var data = this.data(); 
      if(data[1] === '1'){ 
       api.cells(this.index(), 0).checkboxes.select(); 
      } 
     }); 
    }, 
    order: [[2, "asc"]], 
    paging:false, 
    info:false, 
    filter:false, 
    language: { 
     "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json", 
    }, 
    columns: [ 
     null, 
     { "visible": false}, 
     null 
    ], 
    'columnDefs': [{ 
     'targets': 0, 
     'checkboxes': { 
      'selectRow': true, 
      'selectAll': false 
     } 
    }], 
    select: { 
     style: 'multi' 
    } 
}); 
flen = table.length; 

Flen ist immer "1" in diesem Fall, auch wenn i 4 Tabes haben mit dem "table_select" -Klasse.

Vielen Dank im Voraus für jede Hilfe!

Edit:

änderte ich den Code auf der Grundlage der Kommentare:

table = $('.table_select').DataTable({ 
    'initComplete': function(){ 
    var api = this.api(); 
    api 
     .rows() 
      .every(function(){ 
      var data = this.data(); 
      if(data[1] === '1'){ 
       api.cells(this.index(), 0).checkboxes.select(); 
      } 
     }); 
    }, 
    order: [[2, "asc"]], 
    paging:false, 
    info:false, 
    filter:false, 
    language: { 
     "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json", 
    }, 
    columns: [ 
     null, 
     { "visible": false}, 
     null 
    ], 
    'columnDefs': [{ 
     'targets': 0, 
     'checkboxes': { 
      'selectRow': true, 
      'selectAll': false 
     } 
    }], 
    select: { 
     style: 'multi' 
    } 
}); 

alert(table.length); 

Die Warnung in diesem Fall i Allways "0".

Edit2: Beispiel jsfiddle: jsfiddle.net/tu59s6Ls

Answer 1

lassen Sie mich erklären, was Sie tun

var table = []; // this is setting length 0 as no value 


table[table.length] = ... // here you are setting table[0] = ... 

dies bedeutet, dass Sie den gesamten Wert im Index setzen 0. so was auch immer oblect von jQuery kommt seine Datentabelle auf dem Index 0, so ist die Länge der Tabelle immer 1

Sie müssen den gesamten Wert in der Tabelle variabel einzustellen nicht am Index 0

table = ... 

Answer 2

In Ihrem Code ist die table Variable Array, und in der ersten Position des Arrays (Tabelle [0]) setzen Sie einen Verweis auf die DataTable Elemente. Möglicherweise haben Sie 4 Elemente mit der Klasse table_select, aber Sie speichern die Referenz auf sie im ersten Element (und nicht in der Variablen).

Also eigentlich - table[0].length == 4, aber table.length == 0.

Sie

table[0].lenght 

oder

table = $('.table_select').DataTable 

verwenden können (ohne das Array haben Sie es) .

Answer 3

Datatable nicht zurückkehrt, wenn instanziiert, die gewünschten Daten.

Sie können darauf zugreifen mit Kontextdata()

Also, wenn instantiate die Datentabelle, es auf eine Variable speichern, zugreifen dann diese Variable .context.data() Eigenschaft

bearbeiten

Verwenden Sie .data() anstelle von Kontext

$(document).ready(function() { 
 
    let datatable = $('.table_select').DataTable({ 
 
    'initComplete': function() { 
 
     var api = this.api(); 
 
     api 
 
     .rows() 
 
     .every(function() { 
 
      var data = this.data(); 
 
      if (data[1] === '1') { 
 
      api.cells(this.index(), 0).checkboxes.select(); 
 
      } 
 
     }); 
 
    }, 
 
    order: [ 
 
     [2, "asc"] 
 
    ], 
 
    paging: false, 
 
    info: false, 
 
    filter: false, 
 
    language: { 
 
     "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json", 
 
    }, 
 
    columns: [ 
 
     null, { 
 
     "visible": false 
 
     }, 
 
     null 
 
    ], 
 
    'columnDefs': [{ 
 
     'targets': 0, 
 
     'checkboxes': { 
 
     'selectRow': true, 
 
     'selectAll': false 
 
     } 
 
    }], 
 
    select: { 
 
     style: 'multi' 
 
    } 
 
    }); 
 

 
    let table = datatable.data(); 
 

 
    alert(table.length); 
 
    alert($('.table_select').length); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/fh-3.1.2/se-1.2.0/datatables.min.js"></script> 
 
<link href="https://cdn.datatables.net/v/bs/jszip-2.5.0/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-flash-1.2.2/b-html5-1.2.2/b-print-1.2.2/fh-3.1.2/se-1.2.0/datatables.min.css" rel="stylesheet" /> 
 
<form id="form_login" action="" data-parsley-validate class="form-horizontal form-label-left select_table_form" method="post"> 
 
    <table class="table table_select table-hover display" width="100%;" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
     </th> 
 
     <th> 
 
     </th> 
 
     <th> 
 
      Test 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Value 1 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table class="table table_select table-hover display" width="100%;" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
     </th> 
 
     <th> 
 
     </th> 
 
     <th> 
 
      Test 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Value 1 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table class="table table_select table-hover display" width="100%;" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
     </th> 
 
     <th> 
 
     </th> 
 
     <th> 
 
      Test 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Value 1 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table class="table table_select table-hover display" width="100%;" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
     </th> 
 
     <th> 
 
     </th> 
 
     <th> 
 
      Test 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Test 
 
     </td> 
 
     <td> 
 
      Value 1 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</form>