文章/答案/技术大牛

发布

社区首页 >问答首页 >当与可拖放插件一起使用时，Tablesorter会出现问题。

问当与可拖放插件一起使用时，Tablesorter会出现问题。
EN

Stack Overflow用户

提问于 2015-01-03 07:31:06

回答 1查看 2.7K关注 0票数 1

我使用tablesorter插件进行列排序，使用可拖式插件重新排列列顺序。此外，我还将在某些按钮单击时使用ajax更新表内容。

因此，这里的问题是，当我使用拖放重新排列列顺序，然后更新使用ajax时，列排序不会根据列顺序更新。也就是说，当我们单击Column1时，排序是基于Column2中的数据进行的。

我正在使用这段代码进行ajax更新。jQuery(#Table).trigger(‘updateRows’)；

我也尝试过用jQuery("#emailListTable").trigger('updateAll')；更新--在这种情况下，列拖放停止工作。

还有其他方法可以告诉tablesorter插件列顺序发生了变化吗？

插件详细信息: TableSorter：http://tablesorter.com/docs/ Dragtable：http://akottr.github.io/dragtable/

javascript

jquery

ajax

tablesorter

回答 1

Stack Overflow用户

发布于 2015-01-04 20:51:37

更新:版本2.19.0已经发布。It 包含可拖放小部件的修改版本。 -见这里的演示。

updateRows和updateAll方法在最初的tablesorter插件中不可用，但它们是我的餐盘叉的一部分。

为了使可拖动小部件能够使用tablesorter的分叉，您需要从可拖式updateAll回调函数中触发一个persistState事件。尝试这个演示 -我必须添加一些额外的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是可选的)，因为它是可拖放小部件的依赖项。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27752737

复制

相似问题

问当与可拖放插件一起使用时，Tablesorter会出现问题。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当与可拖放插件一起使用时，Tablesorter会出现问题。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当与可拖放插件一起使用时，Tablesorter会出现问题。
EN