首页 期权学习期权知识正文

jquery分页效果

xiaojiucai 期权知识 2020-08-18 6 0

之前写过一个PHP 的分页效果,但是今天小伙伴和我说了一个不适用后台单纯用前段的JS来写分页,整理了一下:本人比较喜欢用JQ,所以这里用的是JQ的方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        #containet {
            display: inline-block;
            border: 1px solid #ed0181;
            padding: 19px;
            margin: auto;
        }
 
        #pageMain li {
            list-style: none;
            line-height: 22px;
        }
 
        #pageBox {
            padding: 10px 0 0 0;
        }
 
        #pageBox span {
            display: inline-block;
            width: 60px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #fff;
            background: #08a586;
 
        }
 
        #pageNav {
            display: inline-block;
        }
 
        #pageNav a {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #3a87ad;
            text-decoration: none;
        }
 
        #pageNav a.active, #pageNav a:hover {
            background: #3a87ad;
            color: #EFEFEF;
        }
 
        #prev:hover {
            cursor: pointer;
        }
 
        #next:hover {
            cursor: pointer;
        }
    </style>
		</style>
	</head>
	<body>
<div id="containet">
    <ul id="pageMain">
        <li>战舰战机云集 土耳其史上最大海军演习打响 01</li>
        <li>逼近伊朗!美军核航母通过苏伊士运河 02</li>
        <li>宁波一动物园两只袋鼠"出逃" 已全部"抓获归案" 03</li>
        <li>美国2架水上飞机空中相撞 已造成3死10伤 04</li>
        <li>牛牛群赌博调查:一天流水或上亿 有人一月输1400万 05</li>
        <li>女子买18件衣服要退货的卖家被同行找上门:他抄袭 06</li>
        <li>男子"买短乘长"拒绝补票 辱骂推搡工作人员被拘5日 07</li>
        <li>沙特船只在法国装载军火遇阻 转抵西班牙港口 08</li>
        <li>女子因一条狗多次撕扯警察 最后张口咬向警察手背 09</li>
        <li>男子刀捅妻子逃跑 遇交警查车时突然下车跪地自首 10</li>
        <li>烟酒店店主接待"神秘女" 老板娘查看监控后气坏了 11</li>
        <li>上海酒店7月起不主动提供一次性用品 违者将被处罚 12</li>
        <li>加州渔民垂钓偶遇一座头鲸从船底蹿出 13</li>
        <li>油价7连涨后终于下调!每升降6分钱加满一箱省3元 14</li>
        <li>...... ...... 15</li>
        <li>...... ...... 16</li>
        <li>...... ...... 17</li>
        <li>...... ...... 18</li>
        <li>...... ...... 19</li>
        <li>...... ...... 20</li>
        <li>...... ...... 21</li>
        <li>...... ...... 22</li>
        <li>...... ...... 23</li>
        <li>...... ...... 24</li>
        <li>...... ...... 25</li>
        <li>...... ...... 26</li>
        <li>...... ...... 27</li>
    </ul>
    <div id="pageBox">
        <span id="prev">上一页</span>
        <ul id="pageNav"></ul>
        <span id="next">下一页</span>
    </div>
</div>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        tabPage({
            pageMain: '#pageMain',
            pageNav: '#pageNav',
            pagePrev: '#prev',
            pageNext: '#next',
            curNum: 7, /*每页显示的条数*/
            activeClass: 'active', /*高亮显示的class*/
            ini: 0/*初始化显示的页面*/
        });
        function tabPage(tabPage) {
            var pageMain = $(tabPage.pageMain);
            /*获取内容列表*/
            var pageNav = $(tabPage.pageNav);
            /*获取分页*/
            var pagePrev = $(tabPage.pagePrev);
            /*上一页*/
            var pageNext = $(tabPage.pageNext);
            /*下一页*/
 
 
            var curNum = tabPage.curNum;
            /*每页显示数*/
            var len = Math.ceil(pageMain.find("li").length / curNum);
            /*计算总页数*/
            console.log(len);
            var pageList = '';
            /*生成页码*/
            var iNum = 0;
            /*当前的索引值*/
 
            for (var i = 0; i < len; i++) {
                pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
            }
            pageNav.html(pageList);
            /*头一页加高亮显示*/
            pageNav.find("a:first").addClass(tabPage.activeClass);
 
            /*******标签页的点击事件*******/
                pageNav.find("a").each(function(){
                    $(this).click(function () {
                        pageNav.find("a").removeClass(tabPage.activeClass);
                        $(this).addClass(tabPage.activeClass);
                        iNum = $(this).index();
                        $(pageMain).find("li").hide();
                        for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
                            $(pageMain).find("li").eq(i).show()
                        }
 
                    });
            })
 
 
            $(pageMain).find("li").hide();
            /************首页的显示*********/
            for (var i = 0; i < curNum; i++) {
                $(pageMain).find("li").eq(i).show()
            }
 
 
            /*下一页*/
            pageNext.click(function () {
                $(pageMain).find("li").hide();
                if (iNum == len - 1) {
                    alert('已经是最后一页');
                    for (var i = (len - 1) * curNum; i < len * curNum; i++) {
                        $(pageMain).find("li").eq(i).show()
                    }
                    return false;
                } else {
                    pageNav.find("a").removeClass(tabPage.activeClass);
                    iNum++;
                    pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
//                    ini(iNum);
                }
                for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                    $(pageMain).find("li").eq(i).show()
                }
            });
            /*上一页*/
            pagePrev.click(function () {
                $(pageMain).find("li").hide();
                if (iNum == 0) {
                    alert('当前是第一页');
                    for (var i = 0; i < curNum; i++) {
                        $(pageMain).find("li").eq(i).show()
                    }
                    return false;
                } else {
                    pageNav.find("a").removeClass(tabPage.activeClass);
                    iNum--;
                    pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                }
                for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                    $(pageMain).find("li").eq(i).show()
                }
            })
 
        }
 
 
    })
</script>
	</body>
</html>

原文链接:https://www.qiquanji.com/post/6992.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论