如何使用jQuery DataTables和復選框作為行選擇器訪問列元素-數據

Question

當我使用復選框選擇一行時，我想訪問jQuery數據表中的行數據。 我已經知道如何訪問行數據，但是它以字符串形式返回，我需要使用javascript字符串函數來拆分數據並獲取所需的值。 我不知道當表中的數據行超過1萬行時，是否行得通。

有沒有一種方法可以使用復選框作為行選擇器來訪問行的特定值，現在我想要的就是獲取所選行的rowId，此ID存儲在表的復選框列中。

這是我表的HTML

<table id="MyTable" class="display table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
            </th>
            <th>
                Name
            </th>
            <th>
                Last Name
                </div>
            </th>
            <th>
                Age
                <br>
            </th>
        </tr>

    </thead>
    <tbody id="tablePersons">
        <tr id="PersonId" style="display:none" class="result-item">

            <td></td>
            <td>

            </td>
            <td>

            </td>
            <td>

            </td>
        </tr>
    </tbody>
</table>

我的數據表定義

var personTable= $('#MyTable').DataTable({
            bInfo: false, paging: false, bInfo : false,
            dom: 'lrtp',
            columnDefs: [ {
                    targets:   0,
                    checkboxes: {
                        selectRow: true
                    }
                }, 
                {
                    targets: 1,
                    className: 'textcolumn-left'
                }, 
                {
                    targets: 2,
                    className: 'textcolumn-left'
                },
                {
                    targets: 3,
                    className: 'textcolumn-left'
                }
            ]
            });

這是我添加行的方式

personTable.row.add(['<input class="personTableCheckboxes" type="checkbox"  value="'+item.personID+'"  id="'+item.personID+'"> ',
                item.name, item.lastName, item.age]);

這是我如何獲取行數據

var listOfCheckedRows = personTable.column(0).checkboxes.selected();

如果我做一個console.log(listOfCheckedRows)我得到一個可以迭代的數組，如果我像這樣迭代它

$.each(listOfCheckedRows , function(index, rowId){
            console.log(rowId) ;

        });

$ .each循環中的console.log包含一個字符串，該字符串包含帶有數據的行的html，我可以執行javascript字符串函數來拆分字符串並獲取表示該行的id的復選框的id，但是我不想這樣做，因為如果表有超過10k的行，這可能效率不高。

我想迭代該數組並獲取所有行ID並將其存儲在另一個數組中，有什么辦法可以獲取所選復選框的ID值？ 無需對每個循環或字符串拆分函數執行此操作即可獲取表示行ID的復選框元素的ID。

Answer 1

如果我正確理解了您的問題，則該方法應該起作用：

編輯2

var arrId = [];
$.each(listOfCheckedRows , function(index, row){
    arrId.push($(row).attr('id'));
});

 var row = '<input class="personTableCheckboxes" type="checkbox" value="6" id="6">'; console.log($(row).attr("id")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

//check the checkboxes and get data from foreach
<th>
<input type="checkbox" value="Check all" class="check-all" style="display: inline;"> Select all
</th>

<?php foreach ($orders as $value) { ?>
  <td>
    <input class='check-this pid' value="<?= $value->pid; ?>" type="checkbox" style="display: inline;">
  </td>
<?php } ?>

//check all using jQuery.

$('.check-all:checkbox').change(function(){
        if($(".check-all").prop('checked') == true){

        $('.check-this').prop('checked','checked');

        }
    else {
        $('.check-this').removeAttr('checked');
    }  
})

//get data 
  var pArr = [];

  $('#example').find(".pid").each(function() {
        if($(this).prop('checked') == true){
          pArr.push($(this).val());
        }
  });

Answer 3

您應該添加如下所示的行，然后使用draw()重繪表。

personTable.row.add([item.personID, item.name, item.lastName, item.age]);

然后checkboxes.selected()將返回一個包含人員ID的列表。

如果您需要有關選定行的其他信息，則可以使用以下代碼：

var data = personTable.rows({ selected: true }).data();