如何使用 excel-bootstrap-table-filter jQuery 插件对日期进行排序

Question

我正在使用excel-bootstrap-table-filter jQuery插件对我网站上的表进行排序。它就像一个梦想，除了在对日期字段进行排序时。我有DD MMM YYYY格式的日期。

excel-bootstrap-table-filter 根据DD值对表进行排序。任何人都知道如何让插件正确排序日期？

Answer 1

由于您正在使用此插件，因此没有实现date过滤器。 您需要用以下代码替换FilterCollection.prototype.sort函数

FilterCollection.prototype.sort = function(column, order, table, options) {
var flip = 1;
if (order === options.captions.z_to_a.toLowerCase().split(' ').join('-')) flip = -1;
var tbody = $(table).find('tbody').get(0);
var rows = $(tbody).find('tr').get();
var th = $(table).find('th')[column];
var isType = th.getAttribute('istype');
var dateformat = th.getAttribute('dateformat');
rows.sort(function(a, b) {
var A = a.children[column].innerText.toUpperCase();
var B = b.children[column].innerText.toUpperCase();
if (isType == 'date') {
A = moment(A, dateformat);
B = moment(B, dateformat);
return A.diff(B, 'd') * flip;
} else if (!isNaN(Number(A)) && !isNaN(Number(B))) {
if (Number(A) < Number(B)) return -1 * flip;
if (Number(A) > Number(B)) return 1 * flip;
} else {
if (A < B) return -1 * flip;
if (A > B) return 1 * flip;
}
return 0;
});
for (var i = 0; i < rows.length; i++) {
tbody.appendChild(rows[i]);
}
};

在这个FIDDLE中，我使用相同的插件创建了一个演示，并使用上面提到的代码修改了排序方法。在这里我使用了moment.js.我希望这能帮助/指导您实现您的要求。

表代码

<table id="table" class="table table-bordered table-intel">
<thead>
<tr>
<th class="filter">Animal</th>
<th class="filter">Class</th>
<th class="filter">Collective Noun</th>
<th dateformat="DD MM YYYY" isType="date" class="filter">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bear</td>
<td>Mammal</td>
<td>Sleuth</td>
<td>11 04 2018</td>
</tr>
<tr>
<td>Ant</td>
<td>Insect</td>
<td>Army</td>
<td>11 05 2018</td>
</tr>
<tr>
<td>Salamander</td>
<td>Amphibian</td>
<td>Congress</td>
<td>11 04 2018</td>
</tr>
<tr>
<td>Owl</td>
<td>Bird</td>
<td>Parliament</td>
<td>10 04 2018</td>
</tr>
<tr>
<td>Frog</td>
<td>Amphibian</td>
<td>Army</td>
<td>1 04 2018</td>
</tr>
<tr>
<td>Shark</td>
<td>Fish</td>
<td>Gam</td>
<td>11 04 2018</td>
</tr>
<tr>
<td>Kookaburra</td>
<td>Bird</td>
<td>Cackle</td>
<td>21 04 2018</td>
</tr>
<tr>
<td>Crow</td>
<td>Bird</td>
<td>Murder</td>
<td>23 04 2018</td>
</tr>
<tr>
<td>Elephant</td>
<td>Mammal</td>
<td>Herd</td>
<td>11 03 2018</td>
</tr>
<tr>
<td>Barracude</td>
<td>Fish</td>
<td>Grist</td>
<td>30 04 2018</td>
</tr>
</tbody>
</table>