Question

我有一个HTML表，我使用JTemplates脚本绑定数据，然后在“processtemplate”行之后我应用数据表效果 - “。dataTables（）;”

一切正常 - 自定义分页，自定义过滤等。唯一的痛点是，当我点击标题时，我无法正确排序。

我每页有10个。加载Page1时，排序在任何列上都能正常工作。但是当我转到下一页并单击列标题对该列进行排序时，它会对先前的页面记录进行排序并显示排序的前10行。

因此在第2页上，默认显示将显示SerialNumbers从21到30的记录。这是正确的。但是当我点击SerialNumber Header对它进行排序时，我会得到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排序标题和管理数据类型，现在一切正常。

JTemplates table + DataTables插件列排序问题

1 个答案: