Javascript PHP、Jquery、Tablesorter 2.23.1-如何添加或删除已排序的列并刷新剩余排序？

我有一个php生成的页面，页面加载后有一个表

<table id="#previewTable">
    <thead>
        <th class="colA">column a - Firstname</th>
        <th>column b - Lastname</th>
    </thead>
    <tbody>
        <tr>
            <td class="colA">Alexander
            </td>
            <td class="colB">Zandvoort
            </td>
        </tr>
        <tr>
            <td class="colA">Alexander
            </td>
            <td class="colB">Brno
            </td>
        </tr>
        <tr>
            <td class="colA">Bastian
            </td>
            <td class="colB">Zolder
            </td>
        </tr>
    </tbody>
</table>

做完后一切都很好。 现在，用户将按任意方向对任意两列进行排序，比如10列A和B saveSort小部件可以很好地记住所有内容。 我们对每一列都有一个复选框“隐藏该列”。 取消选中复选框，例如B应该隐藏/显示相应的列B，删除通过列B完成的行排序，并重新应用任何现有的剩余排序-在本例中为A

我试着这样做： $（document）.on（'click'，'.chk_must'，function（）{//must中的所有复选框

    theSortList = $( '#previewTable' ).get(0).config.sortList;
    var new_sort_list = [];

    if($('.chk_must_'+$(this).attr('data-nr')).is(':visible')){
        $('.chk_must_'+$(this).attr('data-nr')).hide();//show or hide M1 and so on rows
        theColumnNumber = $('.chk_must_'+$(this).attr('data-nr')).attr('data-column');

        $(theSortList).each(function(key,element){ //get the header text for each selected
            //var element[0] // var element[1]; //[0]=field number starting at 0, [1]=sort order, whereas 0=ASC and 1=DESC
            if(element[0]!=theColumnNumber){
                new_sort_list.push(element);
            }
        });

        if (new_sort_list.length==0){
            //nothing
        }else{
            $( '#previewTable' ).get(0).config.sortList = [new_sort_list];
            $('#previewTable').trigger( 'sorton',[new_sort_list] );
        }


        $("#previewTable").trigger("updateCache").trigger("updateAll");
        $('#previewTable').trigger('refreshWidgets', true,false);

    }else{
        $('.chk_must_'+$(this).attr('data-nr')).show();//show or hide M1 and so on rows
    }

});

我所做的一切……排序不会根据[新排序列表]重置和重做，而是保持不变。隐藏/显示列本身也可以。 似乎我没有应用正确类型/格式的新排序列表，这可能是因为内部缓存不会被重置，即使使用refreshWidgets和updateCache等工具也是如此。

有什么办法可以让这一切顺利进行吗？ TIA

---

Alex

首先，删除

updateCache

和

updateAll

的触发器。仅涉及排序时不需要它们

sortList

中的值由列索引和分组在一起的排序方向组成。例如：

// [ [ columnA, direction ], [ columnB, direction ] ]
table.config.sortList = [ [0,0], [1,0] ];

因此，上述代码具有以下功能：

$(theSortList).each(function(key,element){ //get the header text for each selected
    //var element[0] // var element[1]; //[0]=field number starting at 0, [1]=sort order, whereas 0=ASC and 1=DESC
    if(element[0]!=theColumnNumber){
        new_sort_list.push(element);
    }
});

此函数应该使用而不是上面用于DOM元素的每个函数

相反，如果只有几列，您可以选择主列并在其他列隐藏时对其进行排序

以下是一些未经测试的代码作为示例：

var direction = 'asc', // use 'desc' for descending sort
    // sort column priority from left-to-right
    priorities = [ 0, 1, 2, 3 ],

    config = $( '#previewTable' ).get(0).config,
    sortColumn = -1,
    theColumnNumber = $('.chk_must_'+$(this).attr('data-nr')).attr('data-column');

$.each( priorities, function(indx, val) {
    // config.$headerIndexed sets one header cell for each column
    // in a basic array (not a jQuery object set); it is
    // needed for tables with multiple thead rows & colspans
    if ( !config.$headerIndexed[ val ].is(':hidden') ) {
        sortColumn = val;
        break;
    }
});

if ( sortColumn > -1 ) {
    $( '#previewTable' ).trigger('sorton', [ [[ sortColumn, direction ]] ]);
}

或者，您可以使用来执行隐藏和显示列的工作，并添加以下非常基本的代码（仅为2列编写），当列的可见性发生变化时更新排序（）：

var direction = 'asc', // use 'desc' for descending sort
    // sort column priority from left-to-right
    priorities = [ 0, 1, 2, 3 ],

    config = $( '#previewTable' ).get(0).config,
    sortColumn = -1,
    theColumnNumber = $('.chk_must_'+$(this).attr('data-nr')).attr('data-column');

$.each( priorities, function(indx, val) {
    // config.$headerIndexed sets one header cell for each column
    // in a basic array (not a jQuery object set); it is
    // needed for tables with multiple thead rows & colspans
    if ( !config.$headerIndexed[ val ].is(':hidden') ) {
        sortColumn = val;
        break;
    }
});

if ( sortColumn > -1 ) {
    $( '#previewTable' ).trigger('sorton', [ [[ sortColumn, direction ]] ]);
}

$(function () {

    /*** custom css only button popup ***/
    $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'columnSelector', 'stickyHeaders'],
        widgetOptions: {
            columnSelector_container: $('#columnSelector'),
            columnSelector_mediaquery: false
        }
    }).on('columnUpdate', function(){
        var sortCol = 0,
            s = this.config.selector;
        // if column a is hidden & column b is showing
        // sort column b
        if ( !s.states[0] && s.states[1] ) {
            sortCol = 1;
        }
        $(this).trigger('sorton', [ [[sortCol, 0]] ]);
    });

});