jQuery pagination分页示例详解


Posted in jQuery onOctober 23, 2018

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery append与appendTo方法比较
May 24 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
jquery实现动态添加附件功能
Oct 23 #jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
You might like
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
js停止输出代码
2008/07/20 Javascript
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python程序封装为win32服务的方法
2021/03/07 Python
Python中logging实例讲解
2019/01/17 Python
python做接口测试的必要性
2019/11/20 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
给民警的表扬信
2014/01/08 职场文书
教师绩效工资方案
2014/02/01 职场文书
人资专员岗位职责
2014/04/04 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
信访维稳工作汇报
2014/10/27 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
七年级作文之英语老师
2019/10/28 职场文书