2
<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>

its pages with list or rows

how to sort the list based on date?

2 Answers 2

1
<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>
Sign up to request clarification or add additional context in comments.

1 Comment

i am trying with the above code will check and tell u
1

You can achieve this by using following JavaScript code

 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;
    });

Now you have the sorted array and a map that have key as date and value as element itself.

2 Comments

Comments are not for extended discussion; this conversation has been moved to chat.
While doing pagination only records on the page is sorted not the whole record in the table are sorted..any help or suggestion how to do proceed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.