交换jQuery数据表中的行
Swap rows in the jQuery datatables
我正在开发jQuery数据表插件。单击向下箭头时，交换当前行和下一行。单击向上箭头时，交换当前行和前一行。但是我无法得到特定被点击行的索引
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on('click', '.swapDown', function(event){
var ind = table.row(this.closest("tr")).index();
var movedData = table.row(this.closest("tr")).data(),
otherData =table.row(this.closest("tr").prev()).data();
table.row(this.closest("tr").prev()).data(otherData).draw();
table.row(this.closest("tr")).data(movedData).draw();
console.log(ind);
});
$('#example tbody').on('click', '.swapUp', function(event){
var ind = table.row(this.closest("tr")).index();
var movedData = table.row(this.closest("tr")).data(),
otherData =table.row(this.closest("tr").next()).data();
table.row(this.closest("tr").next()).data(otherData).draw();
table.row(this.closest("tr")).data(movedData).draw();
console.log(ind);
});
});
jsfiddle.net/UvjnT/1289/
我今天早上一直在玩这个，这是我已经启动并运行的，我真的不确定这是最好的解决方案，但它确实有效:
$(function() {
var table = $("#example").DataTable({
"order": [
[0, 'asc']
],
"paging": true,
"columns": [{
"visible": false
}, {
"orderable": false
}, {
"orderable": false
}, {
"orderable": false
}, {
"render": function(d) {
return $("<i/>", {
"class": "fa fa-caret-down swapable swapDown"
}).prop("outerHTML");
},
"orderable": false
}, {
"render": function(d) {
return $("<i/>", {
"class": "fa fa-caret-up swapable swapUp"
}).prop("outerHTML");
},
"orderable": false
}]
});
$('#example tbody').on('click', 'td', function(event) {
// We're only interested in cells with a class of swapable
if ($(this).find(".swapable")) {
// Helper variable
var _this = $(this).find(".swapable");
// Total number of rows (including hidden rows (zero based index))
var tableRows = table.data().length - 1;
// Index of current row
var rowIndex = table.row(this).index();
// Data of current row
var rowData = table.row(this).data();
// Index value of row (artifical because it's ours) - also tempval
var artificalIndex = ~~rowData[0];
/*
* If we're on the bottom row of the table and the direction of travel is downwards or if we're
* on the top row and the direction of travel is upwards then we need to just swap the top and
* bottom rows
*/
if(
(_this.hasClass("swapDown") && artificalIndex === tableRows)
||
(_this.hasClass("swapUp") && artificalIndex === 0)
){
var topIndex, bottomIndex;
table.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
if(~~data[0] === 0){
topIndex = rowIdx;
}
if(~~data[0] === tableRows){
bottomIndex = rowIdx;
}
});
table.cell(topIndex, 0).data(tableRows);
table.cell(bottomIndex, 0).data(0);
}else{
var movingIndex, tempData;
table.rows().every(function(rowIdx, tableLoop, rowLoop) {
var data = this.data();
// Moving down
if (_this.hasClass("swapDown") && ~~data[0] === artificalIndex + 1) {
movingIndex = rowIdx;
tempData = data[0];
}
// Moving up
if (_this.hasClass("swapUp") && ~~data[0] === artificalIndex - 1) {
movingIndex = rowIdx;
tempData = data[0];
}
});
table.cell(rowIndex, 0).data(tempData);
table.cell(movingIndex, 0).data(artificalIndex);
}
table.draw(false);
}
});
});
这是一个工作的JSFiddle。
我对索引有一些问题，因为我不是100%确定内部索引在draw()之后刷新，所以我决定使用隐藏索引并对其进行排序。这是用来创建表的HTML:
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="table" id="example">
<thead>
<tr>
<th>Index</th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Swap Down</th>
<th>Swap Up</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>1</th>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>2</th>
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>3</th>
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>4</th>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>5</th>
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td></td>
<td></td>
</tr>
<tr>
<th>6</th>
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>7</th>
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>8</th>
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>9</th>
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>10</th>
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>11</th>
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>12</th>
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td></td>
<td></td>
</tr>
<tr>
<th>13</th>
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td></td>
<td></td>
</tr>
<tr>
<th>14</th>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
希望这能有所帮助，我很感激来自社区的任何反馈，关于如何改进它，因为我很确定我错过了一些东西…?
我从来没有使用过这个插件，但@annoyingmouse是对的。您可能打算使用$(this)而不是this，因为前者创建了一个可以使用jQuery方法的jQuery对象。我注意到的另一件事是，包含的DataTables插件不是最新版本(根据datatable.net)。我不知道这是否对你的应用程序有很大的影响，但链接的小提琴包括datatable .net的最新版本。我也不确定你从小提琴期望的结果，但它确实在'click'上在控制台注销一个整数。
另一件事是你的表不一定是正确设置的。"Swap Up"元素与"Swap Up"元素不一致，"Swap Down"元素也是如此
<th>Swap Up</th>
<th>Swap Down</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td><i class='fa fa-caret-down swapDown'></i></td>
<td><i class='fa fa-caret-up swapUp'></i></td>
您可能想要反转td元素。或者命名约定让我很困惑。
http://jsfiddle.net/UvjnT/1291/相关文章：
- 用程序搜索JQuery数据表中的文本
- jquery数据表的自定义ko绑定
- jquery数据表在初始化时设置宽度
- 如何通过下拉值更改来更改jquery数据表的值
- 无法删除数据表jquery中的多行
- 为什么分页数据表JQuery没有'不要使用JSF ui:重复
- 数据表jquery分页和colreorder
- 如何在字符串中包含隐藏的 HTML 元素 - 数据表 - jquery
- 数据表 jQuery 无法重新初始化数据表
- 使用数据表 jQuery 将数据插入到特定列单元格中
- 数据表 jQuery 单击事件在分页后不起作用
- 我怎么能得到值从tfoot数据表jquery
- 如何获得DOM的单元格在单列与隐藏行在数据表jquery
- 数据表(JQuery)关于如何多列过滤文本框中给定的包含数据的数组
- 滚动到选定的行在数据表jQuery插件
- 添加复选框到数据表JQuery服务端
- 数据表(jQuery的表插件)在离开和返回数据表时继续您离开的地方
- 数据表&JQuery在IE8中被破坏
- 更改数据表jquery Header&页脚宽度
- 创建自定义搜索框的数据表JQuery插件
