Question

我不是真正进入jQuery，但我需要学习它，以便我能够实现一些项目即时工作。

我使用带有select-Extension的Datatables来多选表行。之后我需要在php中使用这些行的值。所有这一切都像魅力一样，问题是我只能在表单中使用一个表。这意味着我只能将带有“table_select”类的第一个表的结果放到$ _POST变量中。

我试图改变jQuery-Code来迭代这个类的所有对象，所以我做了一个数组并试图用[Array.length]推送这个数组，但我只得到Array [0]中的值。 / p>

我做错了什么？

    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个Tabes与“table_select”-Class。

提前感谢您的帮助！

编辑：

我根据评论更改了代码：

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处设置整个值。所以oblect来自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()代替 context

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

数组中的多个对象

3 个答案: