<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="pagination.css" />
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.pagination.js"></script>
<!-- Load data to paginate -->
<script type="text/javascript" src="members.js"></script>
<script type="text/javascript">
//这个文件显示不同的选项的分页插件
//它也演示了如何使用一个数据结构
//生成分页内容以及如何显示一个以上的
//项目每页items_per_page。
/***回调函数中显示的内容。
**被称为每次用户点击一个分页链接。
** @param{int} 页面索引，新建页面索引
* @{JQuery}JQ容器的分页链接，作为一个对象
*/
function pageselectCallback(page_index, jq){
// 为表单分页元素获取数字
var psize = $('#items_per_page').val();
/*var max_elem = Math.min((page_index+1) * items_per_page, members.length);
var newcontent = '';
// Iterate through a selection of the content and build an HTML string
for(var i=page_index*items_per_page;i<max_elem;i++)
{
newcontent += '<dt>' + members[i][0] + '</dt>';
newcontent += '<dd class="state">' + members[i][2] + '</dd>';
newcontent += '<dd class="party">' + members[i][3] + '</dd>';
}
*/
// Replace old content with new content
$('#Searchresult').load("fenye3.asp?page="+(page_index + 1)+"&psize="+psize);
$('#ajaxstart').ajaxStart(function(){$(this).html('正在加载……')});
$('#ajaxstart').ajaxComplete(function(){$(this).html('')});
// Prevent click eventpropagation
return false;
}
//表单包含领域许多pagiantionoptiosn所以你可以
//快速查看结果的不同选择。
//这个函数创建一个选择对象的分页功能。
//这将是不必要的，在你的应用程序，你只要
//一次的选择。
function getOptionsFromForm(){
var opt = {callback: pageselectCallback};
// 收集选择从文本域-域命名的选项对应
$("input:text").each(function(){
opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
});
/* // 避免注射本演示
var htmlspecialchars ={ "&":"&", "<":"<", ">":">", '"':"""}
$.each(htmlspecialchars, function(k,v){
opt.prev_text = opt.prev_text.replace(k,v);
opt.next_text = opt.next_text.replace(k,v);
})
*/
return opt;
}
// 当文档已加载，初始化分页表
$(document).ready(function(){
//从表单选项中创建分页单元
var optInit = getOptionsFromForm();
var maxpage = 0
$.get("fenye3.asp?lx=maxpage",function(data){
maxpage = data;
$("#Pagination").pagination(maxpage, optInit);
$("#total").html(maxpage);
});
$.get("test.asp",{aa:"46"},function(data){alert(tt)},"script");
//$("#Pagination").pagination(86879, optInit);
// 事件处理程序的按钮
$("#items_per_page").change(function(){
var opt = getOptionsFromForm();
// 根据参数重重建分页
$("#Pagination").pagination(maxpage, opt);
});
});
</script>
<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
margin: 20px;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
margin-bottom:10px;
font-size:1.5em;
}
h3 {
margin-top:10px;
font-size:1em;
}
#Searchresult {
margin-top:15px;
margin-bottom:15px;
border:solid 1px #eef;
padding:5px;
background:#eef;
width:80%;
}
#Searchresult dt {
font-weight:bold;
}
#Searchresult dd {
margin-left:25px;
}
#footer {
margin-top:20px;
font-size:60%;
color:#15B;
}
label {
float:left;
width:35px;
display:block;
}
form p {
clear:both;
}
.numeric{
width:20px;
}
-->
</style>
<title>JQuery分页实例</title>
</head>
<body>
<h1>jQuery 分页插件实例<span id="ajaxstart"></span></h1>
<br style="clear:both;" />
<h3>从服务器获得的文章列表</h3>
<dl id="Searchresult">
<dt>搜索结果将被放在这 ...</dt>
</dl>
<div style="float:left">总记录 <span id="total"></span> 条, <input type="text" value="5" name="items_per_page" id="items_per_page" class="numeric"/>条/页</div>
<div id="Pagination" class="pagination">
</div>
<!-- 此表只是表明范围和显示风格. -->
<div id="footer">
</div>
</body>
</html>
jquery_jaxa实现数据库取数据进行静态分页
4星 · 超过85%的资源 需积分: 17 109 浏览量
2012-03-16
19:42:52
上传
评论
收藏 72KB RAR 举报 
jquery实现数据库读取数据分布.rar （6个子文件） 
pagination.css 516B jquery-1.7.js 243KB jt_conn.asp 409B fenye3.asp 2KB Pagination2.htm 5KB jquery.pagination.js 5KB
评论1
最新资源