0
JTemplates 스크립트를 사용하여 데이터를 바인딩하는 HTML 테이블이 있고 "processtemplate"라인 다음에 "datataable"효과를 적용하는 HTML 테이블이 있습니다. "data.tables();"JTemplates table + DataTables plugin 열 정렬 문제
모든 것이 잘 작동합니다 - 사용자 정의 페이지 매김, 맞춤 필터링 등. 헤더를 클릭하면 제대로 정렬 할 수 없다는 것이 유일한 단점입니다.
페이지 당 10row가 있습니다. Page1이로드되면 정렬은 모든 열에서 올바르게 작동합니다. 그러나 다음 페이지로 이동하여 해당 열을 정렬하기 위해 열 머리글을 클릭하면 이전 페이지 레코드가 정렬되고 정렬의 상위 10 개 행이 표시됩니다.
2 페이지에서 기본 디스플레이는 21부터 30까지의 SerialNumbers가있는 레코드를 표시합니다. 그러나 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>