jQuery pagination分页示例详解
程序员文章站
2023-11-30 12:06:40
本文实例为大家分享了jquery pagination分页示例的具体代码，供大家参考，具体内容如下
前台html
...
本文实例为大家分享了jquery pagination分页示例的具体代码，供大家参考，具体内容如下
前台html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title>通知公告列表</title>
<link rel="stylesheet" href="../css/pagination.css" type="text/css"></link>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.pagination.js"></script>
<style>
.page{
width:95%;
height:770px;
margin:0 auto;
padding:10px;
border:2px solid #ccc;
border-radius:5px;
margin-bottom:30px;
}
a{text-decoration:none;color:#489fe8;}
</style>
<script>
//var fpurl="url";
var fpurl="url";
var total=0;
$(function(){//页面加载时，进行绑定
$.ajax({
type:"get",
url:fpurl+"getzxwj?lx=list",
data:"",
datatype:"json",
beforesend: function () {
$(".img").show();
},
complete:function(){
$(".img").hide();
bind(0);
},
success:function(data){
var obj=eval(data);
$.each(obj.data,function(index,item){
total=parseint(item.co);//获取总条数
})
}
})
});
//点击分页时调用的函数，page_id为当前页的索引
function pageselectcallback(page_id, jq) {
bind(page_id);
}
var listarr=[];
function bind(pageindex)
{
var temp="";
$.ajax({
type:"get",
//url:"sys/news.do?method=findbytopic&page="+(pageindex+1),
url:fpurl+"getzxwj?lx=zxwjlist&ts="+(pageindex+1),
async:false, ////作用是防止在ajax成功调用之前就调用$("#pagination").pagination,这个时候数据个数还没有初始化
datatype:"json",
//data:"pageindex="+(pageindex+1),//传递页面索引
data:"",
//发送请求前，显示加载动画
beforesend:function(){
$(".img").show();
},
//请求完毕后，隐藏加载动画
complete:function(){
$(".img").hide();
},
success:function(data){
var obj=eval(data);
//alert(obj.data.length);
//total=obj.data.length;//记录总数
$.each(obj.data,function(index,item){
temp+="<div>"+
"<a style='font-size: 18px; font-famliy: 微软雅黑;font-weight:700;' onclick='document.location.href=""+ fpurl +" rel="external nofollow" cmp/tzgg/zxwjcontent.html?id="+ item.wjid +""' >"+ item.wjmc+"</a> "+
"<div style='font-size: 14px; font-famliy: 宋体; text-indent: 2em; margin-top: 5px;'>"+ item.fbrq+" </div> "+
"<hr style='border:1px solid #ccc;width:100%;'/>";
});
$("#datas").html(temp); //将创建的新行附加在div中
}
});
if(total!=0){
//调用分页函数，将分页插件绑定到id为pagination的div上
$("#pagination").pagination(total, { //recordcount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
callback: pageselectcallback, //点击分页时，调用的回调函数
prev_text: '« 上一页', //显示上一页按钮的文本
next_text: '下一页 »', //显示下一页按钮的文本
items_per_page:12, //每页显示的项数
num_display_entries:4, //分页插件中间显示的按钮数目
current_page:pageindex, //当前页索引
num_edge_entries:2 //分页插件左右两边显示的按钮数目
});
}
}
</script>
</head>
<body style="">
<div class="img" style="display:none;text-align:center;margin:0 auto;margin-top:200px;z-index:1000;">
<img src="../image/jz.jpg">
</div>
<div class="page">
<div id="datas">
</div>
<div id="pagination" style="margin-bottom:10px;"></div>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。