介绍 & lt; body>
,& lt; !——分页导航条,——比;
,& lt; div 类=皃age", id=皃ag",对齐=癱enter"比;
,& lt; !——& lt; a href=癹avascript:无效(0);“,onclick=癹s_method ($ () . html()),在4 & lt;/a>,——比;
,& lt;/div>
& lt;/body> & lt; script 类型=拔谋?javascript"比;
,$ (function (), {
,//这里通过ajax查询到总记录数totalCount
,//设定每页显示记录数页大小,算出总页数totalPageNum
js_method才能(10);
,});/* *
,*传入当前页和和总页数
,*/,function js_method (currentPageNum totalPageNum), {=,currentPageNum 数量(currentPageNum);
var 才能;startPageNum =, currentPageNum 作用;2,,//起始页
var 才能;endPageNum =, currentPageNum +, 2,,//结束页
美元才能(“# pag")。text(“;”),//清空导航条
if 才能;(startPageNum & lt;=, 0), {
startPageNum 才能=1
时间=endPageNum 才能;startPageNum + 4
,,}
if 才能;(endPageNum 祝辞,totalPageNum), {
endPageNum 才能=totalPageNum
startPageNum 才能=endPageNum 作用;4
,,}
,
if 才能;(currentPageNum !=, 1), {
美元才能(“# pag") .append (
,“& lt; a href=& # 39; javascript:无效(0);& # 39;,onclick=& # 39; js_method (1,“+ totalPageNum +“) & # 39;,在首页& lt;/a>“
,)
美元才能(“# pag") .append (
“才能& lt; a href=& # 39; javascript:无效(0);& # 39;,onclick=& # 39; js_method ((\“.active \“)美元。text () 1,“+ totalPageNum +“) & # 39;, id=& # 39; prePageNum& # 39;祝辞,laquo; & lt;/a>“
,)
,,}
for 才能;(var 小姐:=,0;,小姐:& lt;=, endPageNum;,我+ +),{
if 才能;(小姐:祝辞=,startPageNum), {
,
,,if (小姐:==,currentPageNum), {
,,var ele =,“& lt; a href=& # 39; javascript:无效(0);& # 39;,类=& # 39;活跃# 39;,onclick=& # 39; js_method(美元(这)。text (),“+ totalPageNum +“) & # 39;,在“+
,,,小姐:+,“& lt;/a>“
,,},{else
,,var ele =,“& lt; a href=& # 39; javascript:无效(0);& # 39;,onclick=& # 39; js_method(美元(这)。text (),“+ totalPageNum +“) & # 39;,在“,+,小姐:+,“& lt;/a>“
,,}
,,}
美元才能(“# pag") .append(避署)
,,}
if 才能;(currentPageNum !=, totalPageNum), {
美元才能(“# pag") .append (
,才能“& lt; a href=& # 39; javascript:无效(0);& # 39;,onclick=& # 39; js_method(数量($ (\“.active \“)。text ()) + 1,“+ totalPageNum +“) & # 39;, id=& # 39; prePageNum& # 39;, rel=& # 39;前# 39;祝辞,raquo; & lt;/a>“
,,)
,(“# pag") .append(美元
,“& lt; a href=& # 39; javascript:无效(0);& # 39;,onclick=& # 39; js_method (10“+ totalPageNum +“) & # 39;,在尾页& lt;/a>“
,)
,,}
,//在这里通过ajax去查询当前页的数据
,}
,& lt;/script> .page {
,高度:34 px;
,行高:34 px;
,}
.page a {
,显示:inline-block;
,边界:1 px solid # ededed;
,填充:0,12 px;
,颜色:# 3 e3e3e;
,字体大小:14 px;
,字体类型:大河马字体,simsun;
,文字修饰:没有;
,}
.page : hover {
,颜色:# f40;
,边框颜色:# f40;
,}
.page .active .page .active: hover {
,颜色:# fff;
,背景:# f40;
,边界:solid 1 px # f40;
}
这篇文章主要介绍了js怎么实现简单分页导航栏效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
具体内容如下
最终的效果:,
1。分页需要的几个重要参数:
总记录条数:,totalCount(查数据库)
每页记录数:,pageSize (自己设置)
总页数:,totalPageNum (根据上面的参数计算),
当前页:currentPageNum (前台传入)
当前页要显示的内容:,List
2只在html页面中添加分页导航条的& lt; DIV>
3只编写分页逻辑的js
4只添加css样式
感谢你能够认真阅读完这篇文章,希望小编分享的“js怎么实现简单分页导航栏效果”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
