我有一个 HTML 表，我使用 JTemplates 脚本将数据绑定到该表，然后在“processtemplate”行之后应用数据表效果 - “.dataTables();”
一切正常 - 自定义分页、自定义过滤等。唯一的痛点是当我单击标题时无法正确排序。
我每页有 10 行。加载 Page1 后，排序在任何列上都能正常工作。但是当我转到下一页并单击列标题对该列进行排序时，它会对前几页记录进行排序并显示排序的前 10 行。
所以在第 2 页上，默认显示将显示序列号从 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> <a href="#" id="prev">Prev</a>
<a href="#" id="next">Next</a> <a href="#" id="last">Last</a>
</td>
</tr>
</tfoot>
</table>
</div>
</asp:Content>