服务器之家

服务器之家 > 正文

jquery.pagination +JSON 动态无刷新分页实现代码

时间:2019-09-24 10:38     来源/作者:asp.net代码网

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; //每页显示的条数 
$(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();//移除所有的数据行 
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>"); //将返回的数据追加到表格 
}); 


}); 

</script> 


cs代码: 

复制代码代码如下:


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"); 

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
超A是什么意思 你好a表达的是什么
超A是什么意思 你好a表达的是什么 2019-06-06
返回顶部