JTemplates 表 + DataTables插件列排序问题

Question

我有一个 HTML 表，我使用 JTemplates 脚本将数据绑定到该表，然后在“processtemplate”行之后应用数据表效果 - “.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>

Answer 1

好吧，我找到了解决方案。我使用了“sorttable”插件：检查标题的 CSS 排序和管理数据类型，现在一切都很好。