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 Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jQuery实现电梯导航模块
Dec 22 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环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
python使用opencv驱动摄像头的方法
2018/08/03 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python list格式数据excel导出方法
2018/10/31 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python中实现输入一个整数的案例
2020/05/03 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
渡河少年教学反思
2014/02/12 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
环保志愿者活动方案
2014/08/14 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle