JTemplatesスクリプトを使用してデータをバインドしているHTMLテーブルがあり、「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> <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>