Question

我已将sortInitialOrder：“asc”更改为sortortitOrder：tablesorter jquery文件中的“desc”，但它不起作用。当我单击列标题时，第一个排序仍按升序排列。

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

Answer 1

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

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

答：通过按升序排序所有这些，例如：

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

它的sortList参数是一个数组，此数组的每个项目都是一个长度为2的数组，其第一项是列索引，第二项是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>$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 2

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

对于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 3

尝试

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

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

3 个答案: