如何为 List.js 编写排序函数?
How to write sort function for List.js?
我使用 list.js 对 table 的数据进行简单排序。排序功能工作正常,但我想修改它的初始行为。当用户第一次看到 table 时,he/she 应该将一列中具有某个特定值的记录(在本例中使用我的本地货币)放在顶部。只是最初,以后的排序应该以标准方式工作。
让我们看看代码:
<table id="accountsList">
<thead>
<tr>
<th scope="col" class="sort" data-sort="currency-td" aria-role="button"><span>Currency</span></th>
<th scope="col" class="sort" data-sort="accountNo-td" aria-role="button"><span>Account number</span></th>
<th scope="col" class="sort td-centered" data-sort="used-td" aria-role="button"><span>Used</span></th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="currency-td">EUR</td>
<td class="accountNo-td">53106010151036926643566665</td>
<td class="used-td td-centered">
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td class="currency-td">PLN</td>
<td class="accountNo-td">83106010151036926643522665</td>
<td class="used-td td-centered">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="currency-td">PLN</td>
<td class="accountNo-td">59996010151036926643566665</td>
<td class="used-td td-centered">
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td class="currency-td">USD</td>
<td class="accountNo-td">33106010151036999643566675</td>
<td class="used-td td-centered">
<input type="checkbox">
</td>
</tr>
</tbody>
<script type="application/javascript">
$(document).ready(function(){
var options = {
valueNames: ['currency-td', 'accountNo-td', 'used-td']
};
var accountsList = new List('accountsList', options);
accountsList.sort("currency-td", {
order: "desc"
});
});
</script>
我唯一想做的就是把所有带有 'PLN' 货币的记录放在开头的顶部。为什么我不按我想要的方式在 HTML 中按我想要的方式对它们进行排序,然后在没有初始排序的情况下启用排序?因为实际上,这些记录是由PHP生成的(我简化了上面的代码,只是展示了生成HTML的例子),我无法预测我会得到什么数据。
我需要在这个地方写一个排序函数:
accountsList.sort("currency-td", {
order: "desc",
sortFunction: function () {}
});
你有什么想法吗? :)
尝试使用 List.js 的 alphabet 功能,smthg like :
var options = {
valueNames: ['currency-td', 'accountNo-td', 'used-td']
};
var accountsList = new List('accountsList', options);
accountsList.sort("currency-td", { alphabet: "PLNABCDEFGHIJKMOQRSTUVXYZplnabcdefghijkmoqrstuvxyz" }
);
我是这样想出来的:
accountsList.sort('currencyTd', {
order: 'asc',
sortFunction: function (a, b) {
if ((a.currencyTd === 'PLN') != (b.currencyTd === 'PLN')) {
return a.currencyTd === 'PLN' ? 1 : -1;
}
return a.currencyTd > b.currencyTd ? 1 :
a.currencyTd < b.currencyTd ? -1 : 0;
}
});
建议的解决方案:
我使用 list.js 对 table 的数据进行简单排序。排序功能工作正常,但我想修改它的初始行为。当用户第一次看到 table 时,he/she 应该将一列中具有某个特定值的记录(在本例中使用我的本地货币)放在顶部。只是最初,以后的排序应该以标准方式工作。
让我们看看代码:
<table id="accountsList">
<thead>
<tr>
<th scope="col" class="sort" data-sort="currency-td" aria-role="button"><span>Currency</span></th>
<th scope="col" class="sort" data-sort="accountNo-td" aria-role="button"><span>Account number</span></th>
<th scope="col" class="sort td-centered" data-sort="used-td" aria-role="button"><span>Used</span></th>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="currency-td">EUR</td>
<td class="accountNo-td">53106010151036926643566665</td>
<td class="used-td td-centered">
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td class="currency-td">PLN</td>
<td class="accountNo-td">83106010151036926643522665</td>
<td class="used-td td-centered">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="currency-td">PLN</td>
<td class="accountNo-td">59996010151036926643566665</td>
<td class="used-td td-centered">
<input type="checkbox" checked>
</td>
</tr>
<tr>
<td class="currency-td">USD</td>
<td class="accountNo-td">33106010151036999643566675</td>
<td class="used-td td-centered">
<input type="checkbox">
</td>
</tr>
</tbody>
<script type="application/javascript">
$(document).ready(function(){
var options = {
valueNames: ['currency-td', 'accountNo-td', 'used-td']
};
var accountsList = new List('accountsList', options);
accountsList.sort("currency-td", {
order: "desc"
});
});
</script>
我唯一想做的就是把所有带有 'PLN' 货币的记录放在开头的顶部。为什么我不按我想要的方式在 HTML 中按我想要的方式对它们进行排序,然后在没有初始排序的情况下启用排序?因为实际上,这些记录是由PHP生成的(我简化了上面的代码,只是展示了生成HTML的例子),我无法预测我会得到什么数据。
我需要在这个地方写一个排序函数:
accountsList.sort("currency-td", {
order: "desc",
sortFunction: function () {}
});
你有什么想法吗? :)
尝试使用 List.js 的 alphabet 功能,smthg like :
var options = {
valueNames: ['currency-td', 'accountNo-td', 'used-td']
};
var accountsList = new List('accountsList', options);
accountsList.sort("currency-td", { alphabet: "PLNABCDEFGHIJKMOQRSTUVXYZplnabcdefghijkmoqrstuvxyz" }
);
我是这样想出来的:
accountsList.sort('currencyTd', {
order: 'asc',
sortFunction: function (a, b) {
if ((a.currencyTd === 'PLN') != (b.currencyTd === 'PLN')) {
return a.currencyTd === 'PLN' ? 1 : -1;
}
return a.currencyTd > b.currencyTd ? 1 :
a.currencyTd < b.currencyTd ? -1 : 0;
}
});
建议的解决方案: