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 Tree Multiselect使用详解
May 02 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 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利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
javascript中普通函数的使用介绍
2013/12/19 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python 生成器协程运算实例
2017/09/04 Python
使用python存储网页上的图片实例
2018/05/22 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Python线程指南分享
2019/11/19 Python
用python制作个音乐下载器
2021/01/30 Python
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
商务英语专业自荐信
2013/10/14 职场文书
求职者应聘的自我评价
2013/10/16 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
公司聘任书模板
2014/03/29 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
一文搞懂MySQL索引页结构
2022/02/28 MySQL