Question

<tbody>
    <tr th:each="StaplesOrderSummary :${StaplesOrderSummaryList}">---list getting from controller
        <td th:text="*{#dates.format(StaplesOrderSummary.orderDate.time, 'MM-DD-YYYY')}"></td>
        <td><a th:href="@{'/account/orders/'+ *{StaplesOrderSummary.orderNo}}" title="view order" class="actLnk" th:text="*{StaplesOrderSummary.orderNo}"></a></td>
        <td th:text="*{StaplesOrderSummary.type}">Online</td>
        <td class="isPriceCell"><span blc:price="*{StaplesOrderSummary.amount}"></span></td>
        <td th:text="*{StaplesOrderSummary.status}"></td>
        <td class="isButtonCell"><a th:href="@{'ezroh/' + *{StaplesOrderSummary.orderNo}}" class="button single">Reorder Items</a></td>
    </tr>
</tbody>

带有列表或行的页面

如何根据日期对列表进行排序？

Answer 1

您可以使用以下javascript代码

来实现此目的

 var dateArray = [];
 var dateMap = {};
 var dateElements = jQuery(".date_elements_class");
    $(dateElements).each(function() {

        dateMap[$(this).text().replace(/^\s+|\s+$/g, '')] = $(this);
            dateArray.push($(this).text().replace(/^\s+|\s+$/g, ''));
    });
    dateArray.sort();
    dateArray.sort(function(a, b) {
        a = new Date(a);
        b = new Date(b);
        return a>b;
    });

现在你有了排序数组和一个地图，其中键作为日期和值作为元素本身。

希望它有用!!

Answer 2

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript">
        var sortOrder = "desc";
        function sortByDate() {
                        var dateArray = [];
                         var dateMap = {};
                         var dateElements = jQuery(".date_elements_class");
                            jQuery(dateElements).each(function() {

                                dateMap[$(this).text().replace(/^\s+|\s+$/g, '')] = $(this).parent();
                                dateArray.push($(this).text().replace(/^\s+|\s+$/g, ''));
                            });
                            dateArray.sort();
                            dateArray.sort(function(a, b) {
                                    a = new Date(a);
                                    b = new Date(b);
                                    return a>b;
                                });
                            if(sortOrder === "desc") {
                                sortOrder = "asc";
                            } else {
                                dateArray.reverse();
                                sortOrder = "desc";

                            }


                            jQuery(jQuery("table.tbl-general").find("tbody")[0]).html("");

                            for (var i = 0; i < dateArray.length; i++) {
                            jQuery(jQuery("table.tbl-general").find("tbody")[0]).append(dateMap[dateArray[i]]);


                            }




            }
        </script>
    </head>
    <body>
        <table class="tbl-general tbl-orders">
            <thead>
                <tr>
                    <th class="c1 first-col activesort" onclick="sortByDate()">
                        <a href="#">Date</a>
                    </th>
                    <th class="c2">
                        <a href="#">Order Number</a>
                    </th>
                    <th class="c3">
                        <a href="#">Type</a>
                    </th>
                    <th class="c4 isPriceCell">
                        <a href="#">Order Total</a>
                    </th>
                    <th class="c5">
                        <a href="#">Status</a>
                    </th>
                    <th class="c6">
                        <a href="#">Reorder</a>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="date_elements_class">07-12-2014</td>
                    <td>
                        <a title="view order" class="actLnk" href="/pcam/account/orders/5475003998">5475003998</a>
                    </td>
                    <td>ONLINE2 </td>
                    <td class="isPriceCell">
                        <span>$50.75</span>
                    </td>
                    <td>Waiting for Credit Approval </td>
                    <td class="isButtonCell">
                        <a class="button single" href="ezroh/5475003998">Reorder Items</a>
                    </td>
                </tr>
                <tr>
                                    <td class="date_elements_class">06-12-2014</td>
                                    <td>
                                        <a title="view order" class="actLnk" href="/pcam/account/orders/5475003998">5475003998</a>
                                    </td>
                                    <td>ONLINE </td>
                                    <td class="isPriceCell">
                                        <span>$50.75</span>
                                    </td>
                                    <td>Waiting for Credit Approval </td>
                                    <td class="isButtonCell">
                                        <a class="button single" href="ezroh/5475003998">Reorder Items</a>
                                    </td>
                </tr>
                <tr>
                                    <td class="date_elements_class">08-12-2014</td>
                                    <td>
                                        <a title="view order" class="actLnk" href="/pcam/account/orders/5475003998">5475003998</a>
                                    </td>
                                    <td>ONLINE1 </td>
                                    <td class="isPriceCell">
                                        <span>$50.75</span>
                                    </td>
                                    <td>Waiting for Credit Approval </td>
                                    <td class="isButtonCell">
                                        <a class="button single" href="ezroh/5475003998">Reorder Items</a>
                                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

如何在html或javascript中根据日期对列表进行排序？

2 个答案: