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 submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
基于JSON数据格式详解
2017/08/31 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
开源Web应用框架Django图文教程
2017/03/09 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
详解Python的循环结构知识点
2019/05/20 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
关于梦想的演讲稿
2014/05/05 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
国庆节标语大全
2014/10/08 职场文书
学校运动会简讯
2015/07/20 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS