Таблица JTemplates + плагин DataTables Проблема сортировки столбцов

У меня есть таблица HTML, к которой я привязываю данные с помощью сценария JTemplates, а затем после строки «processtemplate» я применяю эффект datatables — «.dataTables();»

Все работает нормально - настраиваемая нумерация страниц, настраиваемая фильтрация и т. д. Единственный больной момент заключается в том, что я не могу правильно сортировать, когда нажимаю заголовок.

У меня 10 строк на странице. При загрузке Page1 сортировка работает корректно по любому столбцу. Но когда я перехожу на следующую страницу и нажимаю заголовок столбца, чтобы отсортировать этот столбец, он сортирует записи предыдущих страниц и показывает 10 верхних строк сортировки.

Таким образом, на странице 2 по умолчанию отображаются записи с серийными номерами от 21 до 30. Это правильно. Но когда я нажимаю на заголовок SerialNumber, чтобы отсортировать его, я получаю результат от 1 до 10. Если я снова нажму на заголовок, мне будет показано 10-1 (в порядке убывания). Таким образом, мои текущие данные строк с 20 по 30 полностью потеряны.

Вот код:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="JTemplatesCustomGrid._Default" MaintainScrollPositionOnPostback="true" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">



    <script type="text/html" id="tableTemplate">

        {#foreach $T.d as data}

        <tr>
            <td>{$T.data.SerialNumber}</td>
            <td>{$T.data.ACCT_NUM}</td>
            <td>{$T.data.ITEM_CODE}</td>
            <td>{$T.data.GTIN}</td>
            <td>{$T.data.ITEM_DESC}</td>
            <td>{$T.data.MATCH}</td>
            <td>{$T.data.MATCH_METHOD}</td>
            <td>{$T.data.MFR_ID}</td>
            <td>{$T.data.MFR_NAME}</td>

        </tr>

        {#/for}


    </script>

    <script type="text/javascript" language="javascript">





        function TextChanged(obj) {

            alert(obj.value);
        }
        function SelectChanged(obj) {

            alert(obj.options[obj.selectedIndex].value);
        }
        $(function () {




            function GetTotalPages(totalRowCount) {
                var totalPages = (parseInt(totalRowCount, 10) / 10);
                var totalPagesRounded = Math.round(totalPages);
                if (totalPagesRounded < totalPages) {
                    totalPages = totalPagesRounded + 1.0;

                }
                else {
                    totalPages = totalPagesRounded;
                }
                return totalPages;
            }



            $('#hidPageNumber').val("1");

            PageData($('#hidPageNumber').val());



            $('#next').click(function () {


                var currentPage = parseInt($('#hidPageNumber').val(), 10);



                if (currentPage == GetTotalPages(parseInt($('#hidRowCount').val()))) {
                    $('#next').click(function (e) { e.preventDefault(); });
                    return;
                }

                else {


                    //$('#hidPageNumber').val((currentPage + 1) * 10);
                    $('#hidPageNumber').val((currentPage + 1));

                    PageData($('#hidPageNumber').val());




                }

            });

            $('#prev').click(function () {

                var currentPage = parseInt($('#hidPageNumber').val(), 10);



                if (currentPage == 0) {
                    $('#prev').click(function (e) { e.preventDefault(); });
                    return;
                }


                else {

                    //$('#hidPageNumber').val((currentPage - 1) * 10);
                    $('#hidPageNumber').val((currentPage - 1));
                    PageData($('#hidPageNumber').val());
                }
            });

            $('#first').click(function () {
                var currentPage = parseInt($('#hidPageNumber').val(), 10);
                if (currentPage == 1) {
                    $('#first').click(function (e) { e.preventDefault(); });
                    return;
                }
                else {
                    $('#hidPageNumber').val("1");



                    PageData(1);
                }



            });
            $('#last').click(function () {
                var currentPage = parseInt($('#hidPageNumber').val(), 10);
                var totalRows = $('#hidRowCount').val();
                if ((currentPage * 10) >= totalRows) {
                    $('#first').click(function (e) { e.preventDefault(); });
                    return;
                }
                else {

                    $('#hidPageNumber').val(GetTotalPages(parseInt($('#hidRowCount').val())).toString());
                    PageData(GetTotalPages(parseInt($('#hidRowCount').val())));

                }

            });



        });


        function PageData(startRowIndex) {

            $.ajax({

                url: "Default.aspx/GetTotalRowsCount",
                dataType: "json",
                contentType: "application/json; charset=utf-8;",
                data: '{"startRowIndex": "' + startRowIndex + '", "maxRows": "10"}',
                type: "POST",

                success: function (msg) {



                    $('#hidRowCount').val(msg.d);

                    $.ajax({

                        url: "Default.aspx/GetDataDetails",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8;",
                        data: '{"startRowIndex": "' + startRowIndex + '", "maxRows":"10"}',
                        type: "POST",

                        success: function (msg) {


                            $('#myTable tbody').setTemplate($('#tableTemplate').html());
                            $('#myTable tbody').processTemplate(msg);

                            if (typeof oTable == undefined) {
                               oTable= $('#myTable').dataTable({
                                    "bProcessing": true,
                                    "bStateSave": false
                                });
                            }
                            else 
                            {
                                oTable.fnClearTable(0);
                                oTable.fnDraw();

                            }


                            $('#myTable').tableFilter();
                            var x = $('#myTable thead').children('tr').length;
                            if (x > 2) {
                                $('#myTable thead').find('tr[class="filters"]').first().remove();
                                // $('#myTable').tableFilter();
                            }
                        }
                    });
                },

                error: function (msg) { alert(a); }
            });

        }

    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div style="text-align: center">
        <input type="hidden" id="hidPageNumber" />
        <input type="hidden" id="hidRowCount" />
        <table style="width: auto; border-collapse: collapse" border="1" rules="all" id="myTable">

            <thead>
                <tr class="HeaderRow">
                    <th style="width: 100px">Serial Number 

                    </th>                    
                    <th style="width: 100px">ACCT_NUM

                    </th>                    
                    <th style="width: 100px">ITEM_CODE

                    </th>                    
                    <th style="width: 100px">GTIN

                    </th>                    
                    <th style="width: 100px">ITEM_DESC

                    </th>                    
                    <th style="width: 100px">MATCH

                    </th>                    
                    <th style="width: 100px">MATCH_METHOD

                    </th>                    
                    <th style="width: 100px">MFR_ID

                    </th>                                                            
                    <th style="width: 100px">MFR_NAME

                    </th>
                </tr>
            </thead>
            <tbody id='myTableBody'>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="15" style="text-align: center">
                        <a href="#" id="first">First</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="prev">Prev</a>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#" id="next">Next</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#" id="last">Last</a>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</asp:Content>