Why AJAX response is not in sortable manner

问题

I am using sorttable.jsfor table sorting and my table is updated in every 3 sec by ajax response but the response is not in sorted manner as i expect it to be.

Index page

 <div id="resDiv">
            <table id="myTable1" class="sortable">
            <thead>
                <tr><th id="person">Person</th><th id="monpay">Monthly pay</th></tr>
            </thead>
            <tbody>
                <tr><td>Jan Molby</td><td>£12,000</td></tr>
                <tr><td>Steve Nicol</td><td>£8,500</td></tr>
                <tr><td>Steve McMahon</td><td>£9,200</td></tr>
                <tr><td>John Barnes</td><td>£15,300</td></tr>
            </tbody>
            <tfoot>
                <tr><td>TOTAL</td><td>£45,000</td></tr>
            </tfoot>
        </table>
        </div>
         <a href="#" id="ajax-append">Append new table data</a>

ajax response is :

<table id="myTable" class="sortable">
    <thead>
        <tr><th>Person</th><th>Monthly pay</th></tr>
    </thead>
    <tbody>
        <tr><td>prabha Molby</td><td>£12,000</td></tr>
        <tr><td>abcd Nicol</td><td>£8,500</td></tr>
        <tr><td>steev McMahon</td><td>£9,200</td></tr>
        <tr><td>John Barnes</td><td>£15,300</td></tr>
    </tbody>
    <tfoot>
        <tr><td>TOTAL</td><td>£55,000</td></tr>
    </tfoot>
</table>

JavaScript

 $(function() {

                $("#ajax-append").click(function() {
                    setInterval(function() {
                    var request = $.get("assets/replacecontent.jsp", function(html) {
                        alert(html);
                        $('#resDiv').html(html);
                        var newTableObject = document.getElementById("myTable");
                        alert(newTableObject);
                        sorttable.makeSortable(newTableObject);

//                        alert($("#myTable").length);

                    });
                }, 3000);

                });
            });

Now if any time i sort the ajax response it get sorted but after another response it again change it's order but i want it sorted as previous one.

回答1:

I think you should have read what the sorttable.js faq says:

Sorting the table when the page is loaded

Lots of people ask, "how do I make sorttable sort the table the first time the page is loaded?" The answer is: you don't. Sorttable is about changing the HTML that is served from your server without a page refresh. When the page is first served from the server, you have to incur the wait for it to be served anyway. So, if you want the table sorted when a page is first displayed, serve the table in sorted order. Tables often come out of a database; get the data from the database in a sorted order with an ORDER BY clause in your SQL. Any solution which involves you running sorttable as soon as the page loads (i.e., without user input) is a wrong solution.

But they also state a solution for that:

//Find the TH you want to use, maybe you can store that using an event handler before
var myTH = document.getElementsByTagName("th")[0];
//Then sort it
sorttable.innerSortFunction.apply(myTH, []);

But to that you will have to find the column your user clicked on before, and to be honest I have not found any way using the sorttable api directly. Maybe use some kind of click event handler and store the th that was clicked last.

来源：https://stackoverflow.com/questions/24386439/why-ajax-response-is-not-in-sortable-manner

标签

javascript

jquery

ajax

sorttable.js