如何使用 tablesorter 函数将初始排序顺序指定为降序？

Question

我已将 tablesorter jquery 文件中的 sortInitialOrder:"asc" 更改为 sortInitialOrder:"desc"，但它没有 work.When 我单击列 headers，第一排还是升序排列。

如何在第一次点击时降序排序？如何初始化？

Answer 1

尝试

$("table").tablesorter({ 
        // sort on the 1st column and 3rd column, order asc 
        sortList: [[0,0],[2,0]] 
    });

Answer 2

正如其他人所说，启动 tablesorter 时必须使用 sortList 选项。

How can I get sorting order descending on first click?

A：通过初始化全部升序排列，例如：

$('#tablesorter-demo').tablesorter({
  sortList: [[0,0], [1,0], [2,0], [3,0], [4,0], [5,0] /* as many columns as you have */]
});

它的sortList参数是一个Array，这个Array的每一项都是一个长度为2的Array，第一项是列索引，第二项是0用于升序，1 用于降序。

我创建了一个片段来向您展示如何实现您想要的：

/* tables */
table.tablesorter {
 font-family:arial;
 background-color: #CDCDCD;
 margin:10px 0pt 15px;
 font-size: 8pt;
 width: 100%;
 text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
 background-color: #e6EEEE;
 border: 1px solid #FFF;
 font-size: 8pt;
 padding: 4px;
}
table.tablesorter thead tr .header {
 
 background-repeat: no-repeat;
 background-position: center right;
 cursor: pointer;
}
table.tablesorter tbody td {
 color: #3D3D3D;
 padding: 4px;
 background-color: #FFF;
 vertical-align: top;
}
table.tablesorter tbody tr.odd td {
 background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp:after {
 content: " ▼";
}
table.tablesorter thead tr .headerSortDown:after {
 content: " ▲";
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<table id="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
      <th>Total</th>
      <th>Discount</th>
      <th>Difference</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>.99</td>
      <td>20.9%</td>
      <td>+12.1</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>.99</td>
      <td>25%</td>
      <td>+12</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>Clark</td>
      <td>Kent</td>
      <td>18</td>
      <td>.89</td>
      <td>44%</td>
      <td>-26</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Almighty</td>
      <td>45</td>
      <td>3.19</td>
      <td>44.7%</td>
      <td>+77</td>
      <td>Jan 18, 2001 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>.19</td>
      <td>11%</td>
      <td>-100.9</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
    <tr>
      <td>Bruce</td>
      <td>Evans</td>
      <td>22</td>
      <td>.19</td>
      <td>11%</td>
      <td>0</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
  </tbody>
</table>
<script>
  $('#tablesorter-demo').tablesorter({
    sortList: [[0,0], [1,0], [2,0], [3,0], [4,0], [5,0], [6,0]] // comment this
    //sortList: [[0,1], [1,1], [2,1], [3,1], [4,1], [5,1], [6,1]] // and uncomment this for starting all of them desc
  });
</script>

Answer 3

我发现这个问题试图解决同样的问题，这里的答案并没有多大帮助。

对于 OP 中的问题，您实际上需要应用 sortInitialOrder 选项。 Example. You could also override this for any particular header using headers 选项。

  $("table").tablesorter({
    sortInitialOrder: "asc",

    headers: {
      0: { sortInitialOrder: 'desc' }
    }

  });

我刚刚实现了一个简单的功能来为我的项目做这件事。那么让我展示一下我做了什么。

function headers(headersCount, ascOrderCols, noSorterCols, noFilterCols) {
    let headers = {}

    for (let column = 0; column < headersCount; column++) {
        headers[column] = {}
        if (noSorterCols.includes(column)) {
            headers[column]['sorter'] = false
        };
        if (noFilterCols.includes(column)) {
            headers[column]['filter'] = false
        };
        if (ascOrderCols.includes(column)) {
            headers[column]['sortInitialOrder'] = 'asc'
        };

    };
    return headers;
};

let ascOrderCols = [...Array(11).keys()];
let headersCount = $("#tab1 > thead > tr:first > th").length;

$("#tab1")
  .tablesorter({
      sortInitialOrder: 'desc',
      headers: headers(headersCount, ascOrderCols, [0], [0, 1, 2]),
})

您也可以使用 table 数据代替全局变量。

$("#tab1").data('ascOrderCols', [...Array(11).keys()]);
$("#tab1").data('headersCount', $("#tab1 > thead > tr:first > th").length);

headers: headers($("#tab1").data('headersCount'), $("#tab1").data('ascOrderCols'), [0, 5], [0, 1, 2]),

如何使用 tablesorter 函数将初始排序顺序指定为降序？

How to specify initial sorting order as descending using tablesorter function?

javascript

jquery

tablesorter

asp.net-mvc-4