最近研究了一个js分页,心得跟大家分享一下。
先定义html结构
<ul class="list" id="list">
</ul>
<div class="pre"><a class="crrt" href="#">1</a> <a href="#">2</a>
<a href="#">3</a> <a href="#">4</a></div>
编写js
定义常量
var PAGE_SHOW = 4; //每一页显示个数
var PAGE_COUNT = 0; //总共几页
定义jquery初始化
$().ready(function(){
var gift=[{"flag":1,name:"黑ぃ丫に头","icon":"http://thirdapp1.qlogo.cn/qzopenapp/06d264c84a243d4681ccd0c590f3b609ce9adc9abb705a688bff2332e5c9623c/50","itemid":612707161905581,"tips":50},{"flag":1,name:"夜下听风","icon":"http://thirdapp3.qlogo.cn/qzopenapp/95dac2d0238d3f7bc366c5108238b08a57338918e56a386e477105dba754cc74/50","itemid":542961186395792,"tips":38},{"flag":1,name:"傻孩子","icon":"http://thirdapp0.qlogo.cn/qzopenapp/d02133ecec528eb188159ff701fa4759c121a83deb6a0b44d0a7a6fb29aba3bc/50","itemid":431704355230303,"tips":24},{"flag":1,name:" 黄花胖小子","icon":"http://thirdapp0.qlogo.cn/qzopenapp/3b9a4bbcdd70c703d30a25921de9f500c858f3c6c9406424821e1e8f34c3cb44/50","itemid":527568023566921,"tips":23},{"flag":1,name:"雪中白鹄","icon":"http://thirdapp3.qlogo.cn/qzopenapp/d8219673598dbd6ff4a43f765c865b2ff207ca74206480bbaa8264c4f8a5f0c5/50","itemid":693641514680399,"tips":22}];
if(gift){
//加载第一页页码
PAGE_COUNT = Math.ceil(gift.length/4);
initPageIndex(1);
//加载第一页显示内容
var giftHtml = "";
var firstPageShow = PAGE_SHOW;
var count = 0;
for(var i=0; i<gift.length; i++){
count ++;
var liStyle = "display:none";
if(firstPageShow > 0){
liStyle = "display:block";
}
if('1' == gift[i].flag){
giftHtml += "<li style='"+liStyle+"'><a href='javascript:void(0);' class='bg'><span class='pbg'><img src="+gift[i].icon+"\" /></span><span class='ke'>"+gift[i].name+"</span><span><input type='radio' name='itemSelect' value='"+gift[i].itemId+"'/></span><p class='nic'>"+gift[i].tips+"</p></a></li>\n";
}
firstPageShow--;
}
$("#list").html(giftHtml);
}
});
// 初始化页码
function initPageIndex(currPage){
var pageHtml = "";
for(var i=0; i<PAGE_COUNT; i++){
var j = i+1;
var aClass = "";
if(j == currPage){
pageHtml += "<a class='crrt' href='javascript:void(0)' onclick=\"return false\">"+j+"</a>\n";
} else {
pageHtml += "<a href='javascript:void(0)' onclick=\"loadPage("+j+");return false\">"+j+"</a>\n";
}
}
$(".pre").html(pageHtml);
}
//跳转页面,对应页面的li显示
function loadPage(toPage){
if(toPage <=0){
alert("数据错误");
}
var minIndex = (toPage -1) * PAGE_SHOW;
var maxIndex = toPage * PAGE_SHOW -1;
$("li").each(function(index, domEle){
alert(index + "|" + domEle);
if(index >=minIndex && index <= maxIndex){//要显示
$(domEle).show();
} else {//要隐藏
$(domEle).hide();
}
});
// 重新加载页码
initPageIndex(toPage);
}
分享到:
相关推荐
js分页
自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.
javascript 分页
Javascript我v页效果(收集了很多强大的JS分页代码),可以直接使用,不会JS的也能在自己网站上应用到强大的JS分页特效
纯js分页,用js将内容以分页的形式展现出来,处理数据更简单
这是一个适配所有浏览器的js分页插件,我一直在用,简单方便轻量,重点是适配所有浏览器,适配所有浏览器,适配所有浏览器
js分页功能 js分页功能js分页功能 js分页功能js分页功能 js分页功能
js分页示例,前台分页,客户端分页,分页机制,js分页
关于js分页的实例,asp服务端返回数据!
此示例实现的效果是分页,采用原生JavaScript实现的js分页效果+图片运动效果,希望和大家一起学习交流,有指教的地方请留言给我,谢谢。
比较基础的JS分页,基于jQuery的插件,写的不好,还望见谅。。
漂亮的js分页效果,模仿淘宝的分页,超漂亮
ASP分页代码都得熟悉,JS分页代码你熟悉吗?精心集的分页代码。
最原始js分页,不用任何插件,适合初学者参考学习使用
一个简单的js分页
Ext_Js分页显示案例详解
简单易懂的js分页,已经分装好,通俗易懂
前段时间因工作的需要整理了一份JS分页技术,撒是经典。希望在工作对网页程序员有点帮助。
自制纯js分页工具,花了点时间自己写的,比pagination更纯净更微型