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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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安装全攻略:APACHE
2006/10/09 PHP
php自定义时间转换函数示例
2016/12/07 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
javascript动态加载二
2012/08/22 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python实现的防DDoS脚本
2011/02/08 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
科技之星事迹材料
2014/06/02 职场文书
十佳党员事迹材料
2014/08/28 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
护士岗位竞聘书
2015/09/15 职场文书
导游词之江西赣州
2019/10/15 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS