如何使用 jQuery DataTables 和复选框作为行选择器访问列元素数据

Posted 2023-05-09

【中文标题】如何使用 jQuery DataTables 和复选框作为行选择器访问列元素数据

【英文标题】：How to acces column elements-data using jQuery DataTables and checkboxes as row selectors

【发布时间】：2018-11-20 18:04:24

【问题描述】：

当我使用复选框选择一行时，我想访问我的 jQuery 数据表中的行数据。我已经知道如何访问行数据，但它作为字符串返回，我需要使用 javascript 字符串函数来拆分数据并获取我想要的值；我不知道当我的表中有超过 10k 行数据时这是否可行。

有没有办法使用复选框作为行选择器访问行的特定值，现在我想要的是获取所选行的rowId，这个Id存储在表格的复选框列中。

这是我的表格的 html

<table id="MyTable" class="display table" cellspacing="0" >
    <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。

【参考方案1】：

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

【参考方案2】：

您应该添加如下所示的行，然后使用draw() 重新绘制表格。

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

然后checkboxes.selected() 将返回一个包含人员 ID 的列表。

如果您需要有关所选行的更多信息，可以使用以下代码：

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

【参考方案3】：

如果我正确理解了您的问题，这应该可以：

EDIT2

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>

【讨论】：

如果我执行 console.log of row 我得到这个：["<input class="personTableCheckboxes" type="checkbox" value="6" id="6"> ", "Jhon", "Smith", "44"]，但我尝试了你的答案，我得到了未定义的数组，我尝试使用 row().data() 并且我得到这个["", "", "", "", DT_RowId: "id="PersonId""]

@TorkB80 立即尝试

我得到一个语法错误：Uncaught Error: Syntax error, unrecognized expression: < at Function.fa.error (jquery.min.js:2) at fa.tokenize (jquery.min.js:2) at fa.select (jquery.min.js:2) at Function.fa [as find] (jquery.min.js:2) at n.fn.init.find (jquery.min.js:2) at new n.fn.init (jquery.min.js:2) at n (jquery.min.js:2) at String.<anonymous> (undefined:1410) at Function.each (jquery.min.js:2) at HTMLAnchorElement.<anonymous> (undefined:1406)

这很奇怪。我添加了一个 sn-p 来检查它是否有效并且确实有效。好吧，恐怕我不能帮助你更多。祝你好运。

抱歉console.log 的行显示这个<input class="personTableCheckboxes" type="checkbox" value="6" id="6"> 它不是一个数组它是一个字符串