我试图让jsRender和分页工作,但我对 jsRender 和 jquery 有点陌生。我试图修改它以使用 jsRender 代替,但我只取得了有限的成功。
- 单击“下一页”链接时出现异常(请参阅代码)。例外是“JsRender 错误:未知模板:“#items” - 我认为这是因为代码在后续数据提取中被覆盖,但我不知道如何修复它 - 任何帮助表示赞赏。
- 任何人都可以提出一些提示来创建数字分页机制吗?例如“<< 1 2 3 4 5 6 7 8 9 10 ... >> - 单击“...”会将数字重置为“<< 11 12 13 ..”等等。
这是我的 paging.aspx 代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="paging.aspx.cs" Inherits="paging" EnableViewState="true" %>
<html>
<head>
<style type="text/css">
body,table {font-family: Verdana; font-size:12px;}
th,td {text-align:left;}
div.paging a {padding:0 3 0 3;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="/js/jsrender.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
loadData(1);
loadCount();
});
function loadData(page) {
$.ajax({
type: "POST",
url: "paging.aspx/getData",
data: "{'Page':'" + page + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
updatedata(msg);
UpdatePaging();
}
});
}
function loadCount() {
$.ajax({
type: "POST",
url: "paging.aspx/ItemCount",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
lastPage = Math.ceil(msg.d / 10);
UpdatePaging();
}
});
}
var currentPage = 1;
var lastPage = 3;
function UpdatePaging() {
if (currentPage != 1) {
$('#PrevPage').attr('href', '#');
$('#PrevPage').click(PrevPage);
}
if (currentPage != lastPage) {
$('#NextPage').attr('href', '#');
$('#NextPage').click(NextPage);
}
}
function NextPage(evt) {
evt.preventDefault();
DisplayProgressIndication();
loadData(++currentPage);
}
function PrevPage(evt) {
evt.preventDefault();
DisplayProgressIndication();
loadData(--currentPage);
}
function DisplayProgressIndication() {
// Hide both of the paging controls,
// to avoid click-happy users.
$('.paging').hide();
// Clean up our event handlers, to avoid memory leaks.
$('.paging').unbind();
}
</script>
</head>
<body>
<table>
<thead>
<tr><th>Title</th><th>Date</th><th>ID</th></tr>
</thead>
<tbody id="list">
<script id="items" type="text/x-jsrender">
<tr>
<td>{{>Title}}</td>
<td>{{>Date}}</td>
<td>{{>ID}}</td>
</tr>
</script>
</tbody>
</table>
<script type="text/javascript">
function updatedata(msg) {
$("#list").html($("#items").render(msg.d));
}
</script>
<br />
<a id="PrevPage" class="paging">« Previous Page</a>
<a id="NextPage" class="paging">Next Page »</a>
</body>
</html>
paging.aspx.cs 看起来像这样:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using Microsoft.Practices.EnterpriseLibrary.Data;
using System.Data.Common;
using System.Web.Services;
public partial class paging : System.Web.UI.Page
{
static int pageSize = 10;
static int totalRows = 0;
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static IEnumerable getData(int Page)
{
DataTable dt = DataAccess.returnList(Page, pageSize);
var data = from d in dt.AsEnumerable()
select new
{
Title = d.Field<string>("Title"),
ID = d.Field<int>("ID"),
Date = d.Field<DateTime>("Date").ToString()
};
totalRows = int.Parse(dt.Rows[0]["TotalRows"].ToString());
return data;
}
[WebMethod]
public static int ItemCount()
{
return totalRows;
}
}
我得到的 json 数据在原始请求中看起来像这样:
{"d":[{"Title":"Bla bla","ID":123,"Date":"04-07-2012 10:05:00"},
{"Title":"Bla bla","ID":124,"Date":"26-06-2012 12:50:00"}]}