Skip to main content
 首页 » 编程设计

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

2026年04月16日949zengkefu

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

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

请您参考如下方法:

当你使用这个plugin时所以没有实现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>