Jquery Datatable将行从一个表拖放到另一个表中

Jquery Datatable是一个基于jQuery的插件，用于在网页中展示和操作表格数据。它提供了丰富的功能和灵活的配置选项，使得表格的展示和交互变得更加简单和便捷。

将行从一个表拖放到另一个表中，可以通过以下步骤实现：

首先，确保在页面中引入了jQuery和Jquery Datatable的相关文件。
创建两个表格，分别是源表格和目标表格。可以使用HTML的table标签创建表格结构，并为每个表格添加一个唯一的ID。
初始化源表格和目标表格的Jquery Datatable。通过调用Jquery Datatable的初始化方法，并传入相应的配置选项，可以将表格转换为可交互的Datatable。
在源表格的配置选项中，启用拖放功能。通过设置"rowReorder"选项为true，可以启用行拖放功能。
在源表格的配置选项中，设置拖放的回调函数。通过设置"rowReorder.callback"选项，可以定义拖放行的回调函数，用于处理行拖放完成后的操作。
在目标表格的配置选项中，设置接收拖放行的回调函数。通过设置"rowReorder.dropCallback"选项，可以定义接收拖放行的回调函数，用于处理行拖放到目标表格后的操作。
最后，通过调用源表格的"rowReorder.enable()"方法，启用行拖放功能。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Rows with Jquery Datatable</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body>
    <table id="sourceTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Jane</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

    <table id="targetTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化源表格
            var sourceTable = $('#sourceTable').DataTable({
                rowReorder: true,
                // 设置拖放的回调函数
                rowReorder: {
                    callback: function(row, data, index) {
                        console.log('Row dropped:', row, data, index);
                        // 在拖放完成后的回调函数中可以处理行拖放完成后的操作
                    }
                }
            });

            // 初始化目标表格
            var targetTable = $('#targetTable').DataTable({
                // 设置接收拖放行的回调函数
                rowReorder: {
                    dropCallback: function(row, data, index) {
                        console.log('Row dropped to target table:', row, data, index);
                        // 在接收拖放行后的回调函数中可以处理行拖放到目标表格后的操作
                    }
                }
            });

            // 启用行拖放功能
            sourceTable.rowReorder.enable();
        });
    </script>
</body>
</html>

在这个示例中，我们创建了两个表格，分别是源表格(sourceTable)和目标表格(targetTable)。通过设置相关的配置选项，我们启用了行拖放功能，并定义了拖放行和接收拖放行的回调函数。在回调函数中，可以根据实际需求进行相应的操作。

腾讯云相关产品和产品介绍链接地址：