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 Jsonp跨域模拟搜索引擎
Jun 17 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
使用jQuery实现购物车
Oct 29 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Django接收自定义http header过程详解
2019/08/23 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
智能钱包:Ekster
2019/11/21 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
暑期培训班招生方案
2014/08/26 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
资料员岗位职责范本
2015/04/13 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang