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 Plupload上传插件的使用
Apr 19 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery extend()详解及简单实例
May 06 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery 验证用户名是否重复代码实例
May 14 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
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
jQuery的框架介绍
2016/05/11 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
浅谈Vue.js
2017/03/02 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Python调用C/C++动态链接库的方法详解
2014/07/22 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
学生档案自我鉴定
2013/10/07 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
《草原》教学反思
2014/02/15 职场文书
模具专业求职信
2014/06/26 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年学生工作总结
2014/11/20 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang