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

Question

我已经将tablesorter jquery文件中的sortInitialOrder:"asc"改成sortInitialOrder:"desc"，但是不起作用。当我点击列标题时，第一个排序仍然是升序。

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

Answer 1

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

对于 OP 中的问题，您实际上需要应用 sortInitialOrder 选项。 Example。您也可以使用 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]),
})

您还可以使用包含全局变量的表格数据。

$("#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]),

Answer 2

正如其他人已经说过的，在启动tablesorter 时必须使用sortList 选项。

如何在第一次点击时获得降序排序？

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升序，@987654326 @ 表示降序。

我创建了一个 sn-p 来向您展示如何实现您想要的：

/* 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>$9.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>$19.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>$15.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>$153.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>$13.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>$13.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

试试

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