jQuery数据表：对行进行重新排序将其余部分拖曳

在使用jQuery数据表（DataTables）时，若想实现对行进行重新排序，可以通过集成额外的插件来实现拖拽排序功能。一个常用的插件是"DataTables RowReorder"。以下是如何使用这个插件对DataTable中的行进行拖拽排序的基本步骤：

1. 引入必要的库文件

确保你已经引入了jQuery、DataTables以及RowReorder插件的CSS和JS文件。如果使用CDN，可以这样添加到你的HTML头部：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css"/>

<!-- DataTables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

<!-- DataTables RowReorder extension CSS and JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>

2. 初始化DataTable并启用RowReorder功能

在你的JavaScript代码中，初始化DataTable时通过rowReorder选项启用该功能。你可以自定义拖拽排序的行为，比如设置回调函数处理排序后的逻辑。

$(document).ready(function() {
    var table = $('#example').DataTable({
        rowReorder: {
            // 可以在这里设置选项，例如：
            // update: false, // 禁止自动更新数据源
            // selector: 'td:first-child', // 指定可拖动的列，默认为第一列
        },
        // 其他 DataTables 配置项...
    });
});

3. HTML表格结构

确保你的表格有一个唯一的ID，并且按照DataTables的要求正确标记：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <!-- 其他列... -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <!-- 行数据... -->
        </tr>
        <!-- 更多行... -->
    </tbody>
</table>

注意事项

• 在实际应用中，你可能需要将拖拽排序的结果同步到服务器端，这通常在RowReorder的回调函数中完成。
• 根据你的具体需求，可能还需要调整CSS样式以优化拖拽时的用户体验。

以上就是使用DataTables RowReorder插件实现行拖拽排序的基本方法。