登录  /  注册
博主信息
博文 10
粉丝 1
评论 0
访问量 12105
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
一个通用的前端分页!不需要后端分页
GrMax的博客
原创
1442人浏览过

前言:

这个方法虽然很方便。不需要分页调用!但是全部数据一起调出来。。。这个就留给你们去想吧!

开始:

首先要准备需要用到必须文件比如类库

  1. JQ框架库!这是必须的{传送门}

  2. 分页框架 :jPages  传送门

  3. 然后就没有了

首先当然是引入类库啦  这些大家应该有经验了吧,如果没有可用看一下分页实例代码

第一步 引入

第二步:

使用 

<ul><li></li></ul>进行包裹  然后给ul 一个ID  什么ID  自己弄就好啦  比如:<ul id='aaa'>

 JQ 代码

$("div.holder").jPages({    
containerID: "itemContainer",    
callback    : function( pages,items ){    
$("#legend1").html("第" + pages.current + "页 共"+ pages.count+"页");    
$("#legend2").html( "  ( 共" + items.count+'条)');    
}	    
});

HTML代码(这里是分页的代码  装载分页的)

<div class ='page'>	     
<div class="holder"></div>    
<div id="legend1"></div>    
<div id="legend2"></div>    
<div id='select'>    
<input type ='text' value='1' class='pages'><button class='buttoms'>GO</button>    
</div>    
</div>

输入页面转跳代码

$('.buttoms').click(function(){    
  	var page = parseInt( $(".pages").val() );    
$("div.holder").jPages( page );    
})

实例效果

 1505456661(1).jpg

如使用上有问题可加我个人 QQ : 404199852  备注在  php.cn 博客看到联系方式  微信同号!

感谢php中文网提供博客系统

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学