很长时间没有更新空间了,最近就网友的要求,写了一个基于Jquery Pagination插件的分页实例。服务器端使用Asp(后续再做基于ASP.NET,ASP.NET MVC3,Java等版本)。
实例中,Html页面使用了Jquery Pagination插件,后台ASP中使用了JSON官网中提供的JSON For ASP,数据使用JSON格式,数据库使用Access。
实例实现从一个图书数据库中读取图书信息,并分页显示出来。包括以下几个页面:Index.html页面,显示分页的图书信息;BookListService.asp,为Index.html的Ajax提供异步数据;Connbase.asp,这个不了说了吧,是提供数据库连接的。以下是主要代码:
Index.html内容:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax分页显示实例</title>
<link href="css/pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Script/jquery-1.4.1.js"></script>
<script type="text/javascript" src="Script/jquery.pagination.js"></script>
</head>
<!--列表内容显示区域-->
<table width="1000" border="0" cellspacing="0" id="List">
<tr class="ListTitle"><td>ID</td><td>书名</td><td>ISBN</td><td>单价</td><td>出版社</td><td>出版时间</td></tr>
</table>
<!--分页导航条显示区域-->
<div id="Pagination" class="pagination"></div>
<body>
</body>
</html>
<script type="text/javascript">
var num_entries = 0; //一共多少条记录
var ListItemNum = 15; //每页显示多少条信息
$(function () {
//异步获取总页数
$.get("BookListService.asp", { "Action": "GetRecordCount"}, function (result) {
num_entries = result;
Pagination();//创建分页
});
});
// 创建分页
function Pagination() {
$("#Pagination").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 10, //主体页数
callback: paginationCallback, //回调函数
items_per_page: ListItemNum, //每页显示多少项
prev_text: "前一页",
next_text: "后一页"
});
}
//显示数据
function paginationCallback(page_index, jq) {
$.get("BookListService.asp", { "Action": "GetPageList", "PageIndex": page_index, "ListItemNum": ListItemNum }, function (result) {
var str = "";
result=eval("("+result+")");
$.each(result, function () {
str += "<tr><td>"+this.Id+"</td><td>"+this.BookTitle+"</td><td>"+this.ISBN+"</td><td>"+this.Price+"</td><td>"+this.Publish+"</td><td>"+this.Published+"</td></tr>";
});
$("#List tr:gt(0)").remove();
$("#List").append(str);
})
}
</script>
BookListService.asp文件内容:
<" CODEPAGE="65001"%>
<!--#include file="connbase.asp" -->
<!--#include file="JSON_2.0.4.asp" -->
<!--#include file="JSON_UTIL_0.1.1.asp" -->
<%
action=request("Action")
listItemNum=cint(request("ListItemNum"))
pageIndex=cint(request("PageIndex"))
if action="GetRecordCount" then
sqlstr="select count(*) from Book"
count=conn.execute(sqlstr)(0)
Response.Write count
End if
if action="GetPageList" then
if pageIndex=0 then
sqlstr="SELECT TOP "& listItemNum &" * FROM book book ORDER BY id"
else
sqlstr="SELECT TOP "& listItemNum &" * FROM book WHERE (ID NOT IN (SELECT TOP " & listItemNum * pageIndex & " id FROM book ORDER BY id)) ORDER BY ID"
End if
QueryToJSON(conn, sqlstr).Flush
End If
%>
Connbase.asp文件内容:
<%
Dim Conn
Call DBConnBegin()
Sub DBConnBegin()
If IsObject(Conn) = True Then Exit Sub
On Error Resume Next
Set Conn=Server.CreateObject("ADODB.Connection")
Connstr="DBQ="+server.mappath("DataBase/BookProject.mdb")+";DefaultDir=;DRIVER={Microsoft Access Driver (*.mdb)};"
Conn.Open connstr
If Err.Number > 0 Then
Response.End
End If
End Sub
%>
程序执行过程:
1、Index.html页面加载时,先异步从BookListService.asp中获取数据的总记录数。(因为pagination加载时需要一个记录总数的数据,而Index.html是纯静态的页面,所以需要先来这一步,如果Index不用静态页面,而使用Index.asp的话,可以直接读取数据库中的记录总数,这一步可以省略)。
2、创建分页。所谓创建分页,其实不过是在<div id="Pagination" class="pagination"></div>中填入相应的分页导航信息,真正的分页列表信息是靠回调函数(paginationCallback)来显示。
3、分布创建完成后,会自动调用(paginationCallback)回调函数。执行paginationCallback,异步从BookListService.asp中读取图书的列表信息,并显示出来。
示例打包下载:点击下载