与 dragtable 插件一起使用时的 Tablesorter 问题。答案

【问题标题】：Tablesorter issues when used with dragtable plugin.与 dragtable 插件一起使用时的 Tablesorter 问题。
【发布时间】：2015-01-03 07:31:06
【问题描述】：

我使用 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/

【问题讨论】：

标签： javascript jquery ajax tablesorter

【解决方案1】：

更新：版本 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 来添加可拖动的句柄，这样演示才能 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 是可选的），因为它是可拖动小部件的依赖项。

【讨论】：

Dragtable mod now available!
没有拖放行的功能吗？在表格中向上或向下移动一行？甚至可能是一个按钮来一次将其向上或向下移动一行？
@DDDD 查看static row widget。
是否支持可拖动的粘性标题？