使用表排序器对两个相互依赖的表列进行排序

时间:2019-02-19 23:40:10

标签: javascript jquery tablesorter

我正在尝试构建具有两个相互依赖的列的表。我试图实现的行为是,如果列1或2进行了排序,则无论是升序还是降序,另一列都以降序排序。未排序的列需要保持降序排列。该表可以在任一列中包含重复的条目。我已经读过有关sortForce的选择,它是强制第1列基于第2列进行排序的选项,但我还没有找到一种使第1列和第2列在引用另一列状态时表现相同的方法。如何实现?

我目前具有以下配置。

$(function () {
  $('table').tablesorter({
    ignoreCase: true,
    sortList: [ [0,0], [1,0] ],
    sortAppend: {
        1 : [[ 2, 'd' ]], // always apply descending sort
        2 : [[ 1, 'd' ]]
    },
    sortInitialOrder: "desc",
    sortRestart: true
  });
});
<table class="tablesorter">
    <thead>
        <tr>
            <th>Column 1/th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>B</td>
            <td>A</td>
        </tr>
        <tr>
            <td>C</td>
            <td>A</td>
        </tr>
        <tr>
            <td>B</td>
            <td>A</td>
        </tr>
    </tbody>
</table>


Following the table below, lets say I click to sort column 1 in descending order.  Then I would like for the columns to be ordered as:
C : A
C : B
B : A
A : B

If I click on column 1 again to get a ascending order, I would like column 2 to maintain its descending order based off of column 1.
A : B
B : A
C : A
C : B

If I click on column 2 to sort descending, I would like the inverse behavior.  
A : B
C : B
B : A
C : A

And in the last case, if I click to have column 2 in ascending order, it would read as.
B : A
C : A
A : B
C : B

1 个答案:

答案 0 :(得分:0)

您正在寻找sortAppend option。与其使用值数组进行设置,不如将其设置为包含列键(索引或选择器)和要附加的排序的对象。

在这种情况下,我相信以下设置将满足您的需求:

$(function () {
    $('table').tablesorter({
        ignoreCase: true,
        sortList: [ [0,0], [1,0] ],
        sortAppend: {
            1 : [[ 2, 'd' ]], // always apply descending sort
            2 : [[ 1, 'd' ]]
        },
        sortInitialOrder: "desc",
        sortRestart: true
    });
});

*注意:可以使用a(升序),d(降序),n(下一个),s(相同)和{ {1}}(对面):