asp.net Jquery+json 实现无刷新分页
两个页面
1.TestJson.aspx 展示页面
主要js和引用的js
<link href="../Styles/FundCrm.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
var IndexPage = 0;//第几页0开始
var PageSize = 20;//每页显示多少条数据
var RowCount = 0;//当前多少条数据
var TotalCount = 0;//一共多少条数据
function GetData() {
$(".divTable").html("<br/><br/><br/><br/><br/><br/><br/><br/><br/><img src=\"../Images/loading.gif\" /><br/>正在加载......<br/><br/><br/><br/><br/>");
$.getJSON("GetDataByJson.aspx?action=GetJson&index=" + IndexPage + "&PageSize=" + PageSize + "&time=" + Math.random(),
function (data) {
TotalCount = data[0].count; //一共多少条数据
var dataJson = data[0].Json;
RowCount = dataJson.length;
var table = "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\">";
table += "<tr>";
table += "<td>客户ID</td>";
table += "<td>客户姓名</td>";
table += "</tr>";
for (var i = 0; i < dataJson.length; i++) {
table += "<tr>";
table += "<td>";
table += dataJson[i].AccountId;
table += "</td>";
table += "<td>";
table += dataJson[i].Name;
table += "</td>";
table += "</tr>";
}
table += "</table>";
$(".divTable").html(table);
SetPage();
}
);
}
$(document).ready(function () {
GetData();
});
//设置分页
function SetPage() {
if (IndexPage == 0) {
$("#ibtn_prev").attr("disabled", "disabled"); //上一页
$("#ibtn_frist").attr("disabled", "disabled"); //首页
} else {
$("#ibtn_prev").attr("disabled", ""); //上一页
$("#ibtn_frist").attr("disabled", ""); //首页
}
$("#lb_pager").text(IndexPage + 1);
var start = IndexPage * PageSize + 1;
var end = 0;
if (RowCount == PageSize) {
end = start - 1 + PageSize;
} else {
end = start - 1 + RowCount;
}
$("#lb_record").html(start + " - " + end);
$("#lb_total").text(TotalCount);
}
//点击下一页
function ClickNextPage() {
IndexPage++;
GetData();
return false;
}
//点击上一页
function ClickUpPage() {
IndexPage--;
GetData();
return false;
}
//点击首页
function ClickFirstPage() {
IndexPage = 0;
GetData();
return false;
}
</script>
页面内容：
<div class="divTable" style="text-align:center;">
</div>
<div class="gridview_table">
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0" class="pager">
<tr>
<td class="left">
<span id="lb_record">1 - 1</span> 条(共 <span id="lb_total">1</span>条)
</td>
<td class="right">
<div style="width: 18px; padding-top: 3px">
<input type="image" onclick="return ClickNextPage()" name="ibtn_next" id="ibtn_next" title="下一页"
class="aspNetDisabled" src="../Images/btn_pager_next.gif" /></div><%--disabled="disabled"--%>
<div style="width: auto;">
第 <span id="lb_pager">1</span> 页</div>
<div style="width: 18px; padding-top: 3px">
<input type="image" onclick="return ClickUpPage()" name="ibtn_prev" id="ibtn_prev" title="上一页"
class="aspNetDisabled" src="../Images/btn_pager_prev.gif" style="width: 9px" /></div>
<div style="width: 18px; padding-top: 3px">
<input type="image" onclick="return ClickFirstPage()" name="ibtn_frist" id="ibtn_frist" title="第一页"
class="aspNetDisabled" src="../Images/btn_pager_frist.gif" /></div>
</td>
</tr>
</table>
</div>
2.后台数据页面 GetDataByJson.aspx 一般都是写在hander里面
全部后台CS代码，aspx页面不需要任何代码：
public partial class GetDataByJson : System.Web.UI.Page
{
int PageIndex = 0;
int PageSize = 20;
protected void Page_Load(object sender, EventArgs e)
{
string action = Request.QueryString["action"];
if(!string.IsNullOrEmpty(Request.QueryString["index"]))
PageIndex = Convert.ToInt32(Request.QueryString["index"]);
if (!string.IsNullOrEmpty(Request.QueryString["PageSize"]))
PageSize = Convert.ToInt32(Request.QueryString["PageSize"]);
if (action == "GetJson")
{
GetJson();
}
}
/// <summary>
/// 获取json数据
/// </summary>
/// <returns></returns>
public void GetJson()
{
StringBuilder sbSql = new StringBuilder();
sbSql.Append("select b.* from Account acc ");
sbSql.Append("inner join( ");
sbSql.Append("select * from( ");
sbSql.Append("select ROW_NUMBER() over(Order by Name) rownum,Name,AccountId from Account ");
sbSql.Append(")a ");
sbSql.Append(string.Format("where a.rownum between {0} and {1} ", (PageSize * PageIndex + 1), PageSize *
(PageIndex + 1)));
sbSql.Append(")b on acc.AccountId=b.AccountId");
DbHelperSQL.connectionString = PubConstant.GetConnectionString("SqlConnectionString");
DataSet ds = AreCrm.DBUtility.DbHelperSQL.Query(sbSql.ToString());
string json = ToJson(ds.Tables[0]);
sbSql = new StringBuilder();
sbSql.Append("select count(AccountId) count from Account ");
DbHelperSQL.connectionString = PubConstant.GetConnectionString("SqlConnectionString");
ds = AreCrm.DBUtility.DbHelperSQL.Query(sbSql.ToString());
json = "[{\"count\":\"" + ds.Tables[0].Rows[0][0] + "\",\"Json\":" + json + "}]";
Response.Write(json);
Response.End();
}
/// <summary>
/// 一共多少条数据
/// </summary>
/// <returns></returns>
public void GetCount()
{
StringBuilder sbSql = new StringBuilder();
sbSql.Append("select count(AccountId) count from Account ");
DbHelperSQL.connectionString = PubConstant.GetConnectionString("SqlConnectionString");
DataSet ds = AreCrm.DBUtility.DbHelperSQL.Query(sbSql.ToString());
string json = ToJson(ds.Tables[0]);
Response.Write(json);
Response.End();
}
/// <summary>
/// dataTable转换成Json格式
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public static string ToJson(DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
jsonBuilder.Append("[");
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString());
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("]");
return jsonBuilder.ToString();
}
}
