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)。通过设置相关的配置选项，我们启用了行拖放功能，并定义了拖放行和接收拖放行的回调函数。在回调函数中，可以根据实际需求进行相应的操作。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云区块链（BCBaaS）：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
请注意，以上链接仅供参考，具体的产品选择应根据实际需求和情况进行评估和决策。
相关·内容
我正在尝试将一行或一组行从一个jquery Datatable拖放到另一个Datatable中。json并填充datatable作为above.The行重新排序功能正在工作，并且我能够拖放相同数据表中的行 helper: &q
浏览 2提问于2014-08-27得票数 1
我正在使用jquery.dataTables.js，并尝试将行从一个表拖放到另一个表，反之亦然，从表2拖放到table1，就像下面的示例： <th>Place</th>
<th>checkb
浏览 6提问于2017-02-25得票数 2
回答已采纳
2回答
在向我解释如何从动态添加到SQL数据库表的输入中保存数据时，我需要一些帮助。 </div>因此，最终结果如下(当然，使用CSS :-)
如您所见，您可以添加一个新行并插入一些数据如果您悬停在输入行上，就会弹出一个"minu
浏览 3提问于2021-03-11得票数 0
我有两个选项卡(使用boostrap构建)，每个选项卡都有自己的表。
我需要将表行从一个选项卡拖放到另一个选项卡表中。拖动时，我想在放入表格之前打开光标下的选项卡。感谢您的帮助。
浏览 0提问于2013-02-16得票数 9
回答已采纳
一直在努力使用JQuery数据表。$(document).ready(function() { "pagingType": "full_numbers，并将其放入表中
table
浏览 2提问于2016-04-19得票数 0
嘿，伙计们，我刚开始编程，我遇到了一个问题。我创建的新数据表在单击GridView2时不显示在button1中。尽管它包含了来自“计划”表的数据(检查dtPlanning是否填充了注释中的TextBoxes )。因此，简而言之:我想让DataTable规划进入新的DataTable dtPlanning，并将其显示在网格视图中。代码背后：{
<em
浏览 0提问于2012-10-17得票数 0
回答已采纳
4回答
在C# & .NET中，可以创建一个只包含给定DataTable的DataColumn的适当子集的DataView吗？
在关系代数方面，分配一个RowFilter以执行“选择”操作(σ)。
浏览 4提问于2009-07-29得票数 12
回答已采纳
我使用数据对象将DataSource绑定到GridView。我就是这样做的。然后{然后，在我的方法中，我使用这些语句。dt_Comp
浏览 0提问于2014-07-31得票数 4
回答已采纳
我正在javascript函数中创建一个DataTable，当我这样做时，"search“过滤器就不会出现，而且列的排序也不起作用。实际上，看起来CSS不再起作用了。这是我的密码：<html><link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/1.10.19/js
浏览 0提问于2018-12-13得票数 1
回答已采纳
的目标：，
所以我有一个表(初始化为JQuery DataTable)。每行包含一个“移除我”按钮，当按下该按钮时，我希望从当前表中删除该行。，从表中删除的最后一行将被删除，除非表中只有一行，在这种情况下，将从Jquery.dataTable.min.js抛出一个javascript错误："TypeE
浏览 3提问于2014-08-15得票数 2
回答已采纳
我想我应该对此有一个新的看法，因为我刚刚过渡到jQuery UI对话框，并且希望我很久以前就这样做了。有一件事我遇到了麻烦，那就是把比h:outputText更复杂的东西放到datatable中(有点夸张)。我花了一天中最好的时间让selectOneMenu在数据表中工作，将以前可以工作的代码从一个xxx:dataTable移植到另一个数据表，但是事情在不同的阶段启动，ajax请求
浏览 1提问于2011-10-01得票数 2
回答已采纳
我尝试将表2中的行添加到表1中。如果我选择checkbox列中的行并按add user，则会在表1中添加此行按下add user按钮后，表2中的所有行都将添加到表1中。href="#"&
浏览 4提问于2017-02-24得票数 1
回答已采纳
我需要将数据从一个Sqlite表复制到另一个表。我编写了返回DataTable的方法： {public static void MergeData(string mainDbPath,
浏览 4提问于2015-03-05得票数 0
回答已采纳
我正在尝试使用带有声明变量的触发器将行从一个表插入到另一个表中。当我单独运行代码时，它适用于insert，但我想创建一个触发器并返回0行CREATE TRIGGER Final FOR INSERTBEGINDECLARE @sql NVARCHAR(MAX);
SET @sql = 'INSERT INTO Datatable
浏览 0提问于2019-01-10得票数 0
2回答
我使用JQuery 是为了在整个web应用程序中拥有漂亮的表，但是在其中有一个表的所有不同文件中进行更改和部署变得非常麻烦。$(function(){ "stateSave": true, });我想出了一个想法，就是在所有有一个</em
浏览 4提问于2015-05-21得票数 0
2回答
行属于另一个表。
、、
我正在尝试将数据行从一个本地datatable传输到另一个本地数据表。但我收到一个错误声明：附加信息:此行已属于另一个表。我的代码：
DataTable missedQueue = new DataTable</em
浏览 2提问于2017-06-24得票数 0
我们如何将一个数据列与数据从一个datatable复制到另一个datatable？我有像这样的数据表表中有四列，但我只想要一个column.So
DataTable datatable2=new DataTable(addressAn
浏览 0提问于2010-04-06得票数 1
回答已采纳
2回答
我试图定义一个数据方式来保存值，然后将它添加到dataset indgv: datagridview中，其中包含值dsdetails:一个包含一个名为details的表的数据集 Next End If
运行此操作将导致以下错误如何将声明改为“ne
浏览 0提问于2014-01-01得票数 0
回答已采纳
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
腾讯云开发者
