CODEWITHSUNDEEP
jqueryasp.netajaxtablesorter
Mixim
Mixim

Reputation: 972

Asp.Net: TableSorter not working after update

My Asp.Net WebSite should show to user some table data. I use TableSorter for sorting this data on client side:

<script>var $jQuery171 = jQuery.noConflict();</script>

    <script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>  
    <script type="text/javascript">
        $jQuery171(document).ready(function () {
            $jQuery171('#myControl').tablesorter();

        });
    </script>

Sorting works great, without any problem, but if I delete current data and insert new from AJAX, sorting is failed. My code for update table is:

function JSonObjectPropertiesToHeader(JSonObject, TableId) {
    $("#" + TableId).empty();
    var tableForProcess = document.getElementById(TableId);
    var header = tableForProcess.createTHead();
    var rowOfHeader = header.insertRow(0);
    for (var propertyName in JSonObject.SourceData[0]) {
        var theadCell = document.createElement('th');
        theadCell.innerHTML = propertyName;
        rowOfHeader.appendChild(theadCell);
    };

    return header;
}    

function JSonObjectsToBody(JSonObjects, RequiredProperties, TableId) {
    var tableForProcess = document.getElementById(TableId);
    var body = tableForProcess.createTBody();
    for (var i = 0, item; item = JSonObjects.SourceData[i]; i++) {
        var rowOfBody = body.insertRow(0);
        for (var propertyName in RequiredProperties) {
            var cellForInsert = rowOfBody.insertCell(rowOfBody.cells.length);
            cellForInsert.innerHTML = item[propertyName];
        }
    };
}

and AJAX script:

<script>

        function GetDevicesInfoContent() {
            $.ajax({
                type: "POST",
                url: "myUrl",
                data: "{Lang:'tr'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) { OnGetDevicesInfoSuccessContent(response); },
                error: function (response) { OnGetDevicesInfoError(response); }
            })
        }

        function OnGetDevicesInfoSuccessContent(response) {
            var devicesInfoControlId = "<%=report2_gridView.ClientID%>";
            $("#" + devicesInfoControlId).empty();
            if (response.d.length > 0) {
                var jsonObject = eval('(' + response.d + ')');
                var header = JSonObjectPropertiesToHeader(jsonObject, devicesInfoControlId);
                var requiredProperties = [];
                for (var i = 0, cell; cell = header.rows[0].cells[i]; i++) {
                    requiredProperties[cell.innerHTML] = cell.innerHTML;
                };
                JSonObjectsToBody(jsonObject, requiredProperties, devicesInfoControlId);
            }
        }

    function OnGetDevicesInfoErrorContent(response) {
        alert("MyError:" + response.status + " " + response.statusText);
    }

</script>

If I apply tablesorter again, then sorting is working. I had never use TableSorter before and I don't know why it failed after update. Can anybody tell me?

Upvotes: 1

Views: 272

Answers (1)

Mottie
Mottie

Reputation: 86413

When tablesorter is initialized on a table, it adds event bindings to the thead cells and processes & creates a cache from the text of each tbody cell.

When $("#" + TableId).empty(); is executed, it is essentially wiping out everything, including event listeners.

If new table built from ajax data has the same header cells & text, then all that needs to be done is to empty the tbody. Leave the thead alone! After the tbody is rebuilt and in place within the table, you can update tablesorter's cache by triggering an "update" on the table.

$("#" + TableId).trigger('update');

If the new ajax data does completely change the table, then you will have to reinitialize tablesorter.

Upvotes: 2

Related Questions