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

Question

我确实有一个 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>

在 doc.ready 期间，我像这样应用 tablesorter 小部件：

var the_table = $('#previewTable');
//the_wrapper ==> any jquery selector (not object!) like '.mywrapper' or '#mywrapper'
//the_table ==> any jquery selector (not object!) like '.mytable' or '#mytable'
//the_childs_class ==> class name of the chilkd rows, like 'child-row' - NO dot!
var idx = $(the_table+'.ts-date').index(); //all headers with german dates
var options = {
    showProcessing: true,
    sortReset   : true,
    saveSortReset : false,
    resort:true,
    widgets: [ 'saveSort','zebra','stickyHeaders' ],
    cssInfoBlock : "row-sorter-false",
    //those rows will NOT be included in a sorting! useful to implement blockwise sorting
    widgetOptions: {
        // number or jquery selector targeting the position:fixed element
        stickyHeaders_offset : 0,
        // added to table ID, if it exists
        stickyHeaders_cloneId : '-sticky',
        // trigger "resize" event on headers
        stickyHeaders_addResizeEvent : true,
        // if false and a caption exist, it won't be included in the sticky header
        stickyHeaders_includeCaption : true,
        // scroll table top into view after filtering
        stickyHeaders_filteredToTop: true,
        /* make the table scroll within its wrapper */
        stickyHeaders_attachTo : the_wrapper
    },
    cssChildRow: the_childs_class,
    dateFormat : "ddmmyyyy", // set the default date format
    idx: { sorter: "shortDate", dateFormat: "ddmmyyyy" }
};

$(the_table).tablesorter(options);

完成后一切正常。

现在用户将在十列 A 和 B 中任意两个方向进行排序。

saveSort 小部件可以很好地记住所有内容。

我们确实为每一列“隐藏该列”设置了一个复选框。

取消/选中该复选框，假设 B 应该隐藏/显示相应的 B 列，删除已通过 B 列完成的行的排序并重新应用任何现有的剩余排序 - 在本例中为 A。

我尝试这样做： $(document).on('click','.chk_must',function(){ //所有复选框都必须

    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
    }

});

我做过什么......排序不会根据 [new_sort_list] 重置和重做，但保持不变。

隐藏/显示列本身也可以。

似乎我没有应用正确的 new_sort_list 类型/格式，这可能是内部缓存不会被重置 - 即使没有使用 refreshWidgets 和 updateCache 等等。

有什么想法可以让它发挥作用吗？

TIA

亚历克斯

Answer 1

首先，删除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);
    }
});

这个函数应该使用jQuery.each()，而不是上面用于DOM元素的each函数。

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

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

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 ]] ]);
}

或者，您可以使用columnSelector widget 来完成隐藏和显示列的工作。并添加这个非常基本的代码（仅针对 2 列编写），当列更改可见性时更新排序（demo）：

$(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]] ]);
    });

});