jquery.pagination +JSON 动态无刷新分页实现代码
程序员文章站
2024-03-06 14:47:26
aspx 页面: 复制代码 代码如下: <%@ page language="c#" autoeventwireup="true" codefile="sqlpage...
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");
}
}
复制代码 代码如下:
<%@ 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");
}
}
推荐阅读
-
jquery.pagination +JSON 动态无刷新分页实现代码
-
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
-
asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
-
Jquery+JSon 无刷新分页实现代码_jquery
-
asp.net中利用Jquery+Ajax+Json实现无刷新分页
-
实例代码讲解ajax实现的无刷新分页
-
用AJAX实现的无刷新的分页实现代码(asp.net)
-
Ajax实现无刷新分页实例代码
-
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
-
用AJAX实现的无刷新的分页实现代码(asp.net)