我使用tablesorter插件进行列排序,使用dragtable插件重新排列列顺序。另外,我将在单击一些按钮时使用 ajax 更新表格内容。
所以这里的问题是,当我使用拖放重新排列列顺序然后使用ajax更新时,列排序不会根据列顺序更新。也就是说,当我们点击 Column1 时,排序是根据 Column2 中的数据完成的。
我正在使用这段代码进行ajax更新。 jQuery("#Table").trigger('updateRows');
我也尝试过更新 jQuery("#emailListTable").trigger('updateAll'); 在这种情况下,列拖放停止工作。
还有其他方法可以告诉 tablesorter 插件列顺序已更改吗?
插件详细信息: 表排序器:http://tablesorter.com/docs/ 可拖动:http://akottr.github.io/dragtable/
最佳答案
更新:2.19.0版本已发布。它includes a modified version of the dragtable widget - 参见the demo here .
<小时/>updateRows
和 updateAll
方法在原始的 tablesorter 插件中不可用,但它们是我的 fork of tablesorter 的一部分。 .
为了让 Dragtable 小部件与 TableSorter 的分支一起工作,您需要从 Dragtable persistState
回调函数中触发 updateAll
事件。试试 this demo - 我必须添加一些额外的 HTML 和 CSS 来添加可拖动 handle ,以便演示能够 100% 正常工作(我希望)。
CSS
.table-handle {
background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAIAAAANAQMAAAC5Li2yAAAABlBMVEXd3d2ZmZl1DvVeAAAADklEQVQI12MAAQcsmAEAEFoBQSzdkZ8AAAAASUVORK5CYII=');
background-repeat: repeat-x;
height: 18px;
margin: 0 1px;
cursor: move;
}
HTML(单个标题单元格示例)
<th>
<div class="table-handle"></div>
<div class="sort">Header</div>
</th>
脚本
$(function () {
var $table = $('table')
.dragtable({
dragHandle: '.handle',
persistState: function (table) {
// remove div wrapper, or swapped header
// contents will be replaced
$table.find('thead .tablesorter-header-inner').contents().unwrap();
$table.trigger('updateAll', false);
}
})
.tablesorter({
theme: 'blue',
selectorSort: '.sort',
widthFixed: true
});
});
确保还包含 jQuery UI(jQuery UI css 是可选的),因为它是可拖动小部件的依赖项。
关于javascript - 与可拖动插件一起使用时,Tablesorter 会出现问题。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27752737/