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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现雪花飘落效果
Aug 02 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处理json时中文问题的解决方法
2011/04/12 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python实现的选择排序算法示例
2017/11/29 Python
python实现小球弹跳效果
2019/05/10 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
在django中自定义字段Field详解
2019/12/03 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
同学会邀请书大全
2014/01/12 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
小学英语教学反思范文
2016/02/15 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书