快捷導(dǎo)航

jquery.pagination +JSON 動態(tài)無刷新分頁實現(xiàn)代碼

更新時間：2011年12月01日 23:08:49 作者：

jquery.pagination +JSON 動態(tài)無刷新分頁實現(xiàn)代碼，需要的朋友可以參考下。

aspx 頁面:

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<link href="css/pagination.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="form1" runat="server" > 
<div> 
<table id="tblData" width="80%" cellpadding="1" cellspacing="1" bgcolor="gray" style="text-align:center"> 
<tr> 
<td> 
NewsID 
</td> 
<td> 
Title 
</td> 
<td> 
SmallClassName 
</td> 
<td> 
Author 
</td> 
<td> 
UpdateTime 
</td> 
</tr> 
</table> 
<div id="Pagination"> 
</div> 
</div> 
</form> 
</body> 
</html> 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="js/jquery.pagination.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
var pageIndex =0; //頁索引 
var pageSize =20; //每頁顯示的條數(shù) 
$(function() { 
Init(0); 
$("#Pagination").pagination(<%=pageCount %>, { 
callback: PageCallback, 
prev_text: '上一頁', 
next_text: '下一頁', 
items_per_page: pageSize, 
num_display_entries: 5, 
current_page: pageIndex, 
num_edge_entries: 1 
}); 
function PageCallback(index, jq) { 
Init(index); 
} 
}); 
function Init(pageIndex) { 
$.ajax({ 
type: "POST", 
dataType: "text", 
url: 'SqlPage.aspx', 
data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, 
success: function(data) { 
if(data!=""){ 
$("#tblData tr:gt(0)").remove();//移除所有的數(shù)據(jù)行 
data=$.parseJSON(data); 
$.each(data.News,function(index,news){ 
$("#tblData").append("<tr bgcolor='white'><td>"+news.NewsID+"</td><td algin='left'>"+news.Title+"</td><td>"+news.SmallClassName+"</td><td>"+news.Author+"</td><td>"+news.Updatetime+"</td></tr>"); //將返回的數(shù)據(jù)追加到表格 
}); 
} 
} 
}); 
} 
</script> 

cs代碼：

復(fù)制代碼代碼如下:

 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Data; 
public partial class SqlPage : System.Web.UI.Page 
{ 
public int pageCount = 0; 
public static string connString = "server=192.168.1.91;database=ReportDB;uid=sa;pwd=123456"; 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!IsPostBack) 
{ 
pageCount = GetTotalPage(); 
if (Request["pageIndex"] != null && Request["pageSize"] != null) 
{ 
int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]); 
int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]); 
Response.Write(GetOnePage(pageSize, pageIndex)); 
Response.End(); 
} 
} 
} 
public int GetTotalPage() 
{ 
DBHelper.connString = connString; 
string sql = "select count(*) from News"; 
int rs = Convert.ToInt32(DBHelper.ExecuteScalar(sql)); 
return rs; 
} 
public string GetOnePage(int pageSize, int pageIndex) 
{ 
DBHelper.connString = connString; 
string sql = string.Empty; 
sql = "SELECT TOP " + pageSize + " NewsID,Title,SmallClassName,Author,Updatetime FROM News WHERE NewsID NOT IN (SELECT TOP " + pageSize * (pageIndex - 1) + " NewsID FROM News ORDER BY NewsID DESC) ORDER BY NewsID DESC"; 
DataTable dt = DBHelper.QueryBySql(sql); 
return ConvertJson.ToJson(dt, "News"); 
} 
} 