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获取radio选中的值
May 05 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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 版本]
2007/03/20 PHP
PHP 字符串分割和比较
2009/10/06 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python中常用的os操作汇总
2020/11/05 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
人与自然观后感
2015/06/16 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
python爬虫框架feapde的使用简介
2021/04/20 Python
写好Python代码的几条重要技巧
2021/05/21 Python