如何在PHP中获取Datatables选中行单元格值并传递至其他表单

问题背景 #

已集成Select和SearchBuilder扩展的Datatables实现了多行选择，但无法提取选中行的app_id值，也不清楚如何通过表头的提交按钮将这些值传递到query.php。

现有代码 #

表格代码 #

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>
             <form method="post" action="query.php" id="submitForm">
               <button type="submit" name="send">提交选中项</button>
             </form>                                                 
            </th>
            <th>ID</th>
            <th>Name</th>
    </thead>
    <tbody>
        <?php 
        $sql = mysqli_query($db,"query inside here");
        while ($row=mysqli_fetch_array($sql)){ ?>
        <tr>
            <td></td>
            <td><?php echo $row['app_id'] ?></td>
            <td><?php echo $row['app_nname']?></td>
        <?php }?>
    </tbody>
    <tfooter>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </tfooter>
</table>

JavaScript代码 #

<script>
    $(document).ready(function() {
        var table = $('#example').DataTable( {
            dom: 'QBfrtip',
            select: true,
            buttons: [
                {
                    text: 'Select all',
                    action: function () {
                        table.rows({
                            page:'current',search: 'applied'} ).select();
                    }
                },
                {
                    text: 'Select none',
                    action: function () {
                        table.rows().deselect();
                    }
                }
            ],
            columnDefs: [{
                    searchBuilder: {
                        defaultCondition: "=",
                    },
                    targets: [1]
                }],
        } );
    } );
</script>

解决步骤 #

1. 获取选中行的app_id值 #

利用Datatables的rows({selected: true})方法定位选中行，通过data()提取每行数据，再取出对应列的app_id（列索引从0开始，app_id在表格第二列，对应索引1）：

// 获取选中行的app_id数组
function getSelectedAppIds() {
    var selectedIds = [];
    table.rows({selected: true}).every(function() {
        var rowData = this.data();
        selectedIds.push(rowData[1]);
    });
    return selectedIds;
}

2. 通过表单提交传递app_id #

修改表单提交逻辑，在提交前动态添加隐藏字段，将选中的app_id作为数组传递：

// 监听表单提交事件
$('#submitForm').on('submit', function(e) {
    // 移除已存在的隐藏字段，避免重复提交
    $(this).find('input[name="app_ids[]"]').remove();
    
    var selectedIds = getSelectedAppIds();
    // 遍历选中id，添加为隐藏输入框
    selectedIds.forEach(function(id) {
        $('<input>').attr({
            type: 'hidden',
            name: 'app_ids[]',
            value: id
        }).appendTo(this);
    }.bind(this));
    
    // 无选中行时阻止提交并提示
    if (selectedIds.length === 0) {
        e.preventDefault();
        alert('请至少选择一行数据');
    }
});

将上述函数整合到原有JS代码中，最终JS代码如下：

<script>
    $(document).ready(function() {
        var table = $('#example').DataTable( {
            dom: 'QBfrtip',
            select: true,
            buttons: [
                {
                    text: 'Select all',
                    action: function () {
                        table.rows({
                            page:'current',search: 'applied'} ).select();
                    }
                },
                {
                    text: 'Select none',
                    action: function () {
                        table.rows().deselect();
                    }
                }
            ],
            columnDefs: [{
                    searchBuilder: {
                        defaultCondition: "=",
                    },
                    targets: [1]
                }],
        } );

        // 获取选中行的app_id数组
        function getSelectedAppIds() {
            var selectedIds = [];
            table.rows({selected: true}).every(function() {
                var rowData = this.data();
                selectedIds.push(rowData[1]);
            });
            return selectedIds;
        }

        // 表单提交处理
        $('#submitForm').on('submit', function(e) {
            $(this).find('input[name="app_ids[]"]').remove();
            
            var selectedIds = getSelectedAppIds();
            selectedIds.forEach(function(id) {
                $('<input>').attr({
                    type: 'hidden',
                    name: 'app_ids[]',
                    value: id
                }).appendTo(this);
            }.bind(this));
            
            if (selectedIds.length === 0) {
                e.preventDefault();
                alert('请至少选择一行数据');
            }
        });
    } );
</script>

3. 在query.php中接收app_id #

在query.php中通过$_POST['app_ids']获取选中的id数组，进行安全处理后执行查询：

<?php
if(isset($_POST['app_ids'])){
    $appIds = $_POST['app_ids'];
    // 转义处理防止SQL注入
    $escapedIds = array_map(function($id) use ($db) {
        return mysqli_real_escape_string($db, $id);
    }, $appIds);
    $idsStr = implode(',', $escapedIds);
    // 执行查询
    $sql = "SELECT * FROM your_table WHERE app_id IN ($idsStr)";
    // 后续业务逻辑处理...
}
?>

内容的提问来源于stack exchange，提问作者typicalguy