数组中的多个对象

Question

我不是很喜欢 jQuery，但我需要学习它，这样我才能意识到我正在做的一些项目。

我使用带有 select-Extension 的 Datatables 来多选表格行。之后我需要在 php.ini 中处理这些行的值。所有这些都像一个魅力，问题是我只能在一个表格中使用一个表。这意味着我只能将具有“table_select”类的第一个表的结果放入 $_POST-Variable 中。

我尝试更改 jQuery-Code 以使用此类迭代所有对象，因此我创建了一个数组并尝试使用 [Array.length] 推送此数组，但我仍然只能获取 Array[0] 中的值。

我做错了什么？

    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 总是“1”，即使我有 4 个带有“table_select”-Class 的 Tabes。

提前感谢您的帮助！

编辑：

我根据cmets把代码改成：

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

在这种情况下，警报总是“0”。

Edit2：示例 jsfiddle：jsfiddle.net/tu59s6Ls

Answer 1

让我解释一下你在做什么

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


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

这意味着您将整个值设置为索引 0。因此，jQuery 数据表中的任何障碍都将其设置为索引 0，因此表的长度始终为 1

您需要在表变量中设置整个值而不是索引 0

table =  ...

Answer 2

在您的代码中，table 变量是数组，并且在数组的第一个位置 (table[0]) 您放置了对DataTable 元素的引用。您可能有 4 个带有 table_select 类的元素，但您将对它们的引用保存在第一项中（而不是变量中）。

实际上 - table[0].length == 4，但 table.length == 0。

你可以使用

table[0].lenght

或

table = $('.table_select').DataTable

（没有你那里的数组）。

Answer 3

DataTable 在实例化时不会返回您想要的数据。

您可以通过 context data()

访问它

所以在实例化数据表时，将其保存到一个变量中，然后访问该变量 .context .data() 属性

编辑

使用.data() 代替上下文

$(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>