与dragtable插件一起使用时,Tablesorter会出现问题。

时间:2015-01-03 07:31:07

标签: javascript jquery ajax tablesorter

我正在使用tablesorter插件进行列排序和可拖动插件来重新排列列顺序。此外,我将在某些按钮点击时使用ajax更新表格内容。

所以这里的问题是,当我使用拖放重新排列列顺序然后使用ajax更新时,列排序不会根据列顺序更新。也就是说,当我们点击说Column1时,排序是根据Column2中的数据完成的。

我正在使用这段代码进行ajax更新。 jQuery的( “#表”)触发器( 'updateRows');

我也尝试过更新 jQuery的( “#emailListTable”)触发器( 'updateAll'); 在这种情况下,列拖放停止工作。

告诉tablesorter插件更改列顺序的任何其他方法?

插件详情: TableSorter:http://tablesorter.com/docs/ 可拖动:http://akottr.github.io/dragtable/

1 个答案:

答案 0 :(得分:1)

更新:版本2.19.0已发布。它includes a modified version of the dragtable widget - 请参阅the demo here


updateRowsupdateAll方法在原始tablesorter插件中不可用,但属于我fork of tablesorter的一部分。

为了使可拖动窗口小部件与tablesorter的fork一起使用,您需要在可拖动的updateAll回调函数中触发persistState事件。试试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是可选的),因为它是可拖动小部件的依赖项。