我如何从其他页面获取数据表中选中复选框的所有行的第二列

Posted 2023-05-09

【中文标题】我如何从其他页面获取数据表中选中复选框的所有行的第二列

【英文标题】：How can i get the second column of all rows that have selected checkbox in datatables even from other pages

【发布时间】：2020-03-16 08:08:33

【问题描述】：

我有这张表（从控制器 spring mvc 和 thymeleaf 对象生成的数据）。 我想从我的数据表的多个页面中选择数据。 并获取选中复选框的第二列的所有值（如您在表中看到的那样，它被命名为“ID”）。 我该怎么做？

$(document).ready(function()
        var mytable = $("#maliste").DataTable(
            'columnDefs': [
                 
                    'targets': 0,
                    className: 'select-checkbox',
                    'checkboxes': 
                       'selectRow': true
                    
                 
              ],

              'select': 
                 'style': 'multi'
              ,
              'order': [[1, 'asc']],
              fixedHeader: true,
                searching : true,
                deferRender: true,
                paging : true,
                bProcessing : true,

                dom : 'iftlrp'
        );



        $('#selection').click( function () 

            //i want to have informations here 
         );

这是 html 表格：

<p><button id="selection"  class="btn btn-danger"> THIS IS BUTTON TO GET SELECTION</button> <br></p>
        <table id="maliste" class="table table-striped table-bordered table-sm table-hover">
            <thead>
            <tr>
                <th></th><!--  FOR CHECKBOXES -->
                <th>ID</th>
                <th>STRUCTURE</th>
                <th>CLIENT</th>
                <th>ANNEE</th>
            </tr>
            </thead>
            <tr th:each="boite : $liste">
                <td ></td>
                <td th:text="$boite.id"></td>
                <td th:text="$boite.structure"></td>
                <td th:text="$boite.client"></td>
                <td th:text="$boite.annee" style="white-space: pre-line"></td>
            </tr>
            <tfoot>
            <tr>
                <th></th><!--  FOR CHECKBOXES -->
                <th>ID</th>
                <th>STRUCTURE</th>
                <th>CLIENT</th>
                <th>ANNEE</th>
            </tr>
            </tfoot>
        </table>

这是页面的外观，当我单击按钮以获取 id 列表并发送到控制器表单示例时，我想要 localhost:8080/send_ids

【参考方案1】：

您可以使用 DataTables api 来检索选定的行数据。

见https://datatables.net/extensions/select/examples/api/get.html

还有https://datatables.net/extensions/select/examples/api/select.html

var mytable = $('#maliste').DataTable( ... );

$('#selection').on('click', function() 
   // Get selection
   var selectedRows = mytable.rows( selected: true );

   // Get selection column data
   var selectedData = selectedRows.data();

   // Get 2nd column values
   var selectedIDs = $.map(selectedData, function(row) 
       return row[ 1 ];
   );

   console.log(selectedIDs);
);

这将从第二列打印一个值数组。

在这里查看我的工作示例：https://jsfiddle.net/3ew1go6p/

【讨论】：

它适用于我，我只需导入 js 和 css 文件