js原生分页插件，易使用易定制

最新推荐文章于 2024-04-20 22:10:42 发布

ZhenGangLiu

最新推荐文章于 2024-04-20 22:10:42 发布

阅读量276

点赞数 2

本文链接：https://blog.csdn.net/ZhenGangLiu/article/details/88554012

版权

<!doctype html>
<html>
   <head>
       <meta charset='utf-8'>
   </head>
   <body>

       <div id="pagesDom" class="pagesDom"></div>
       <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
       <script>
           $(function() {
               $('.pagesDom').createPage(function(n) {
                   console.log("当前页码：" + n)
               }, {
                   pageCount: 200,
               });
           });

           var style = document.createElement('style');
           style.type = 'text/css';
           style.rel = 'stylesheet';
           var code=".pagesDom a{text-decoration:none}.pagesDom .table2{border:#c8c8c8 solid;border-width:1px 0 0 1px;background:#f3f0f0;margin-top:25px}.pagesDom .td0{border:#c8c8c8 solid;border-width:0 0 1px 0}.pagesDom .td2{border:#c8c8c8 solid;border-width:0 1px 1px 0}.pagesDom{width:1000px;margin:0 auto;text-align:center}.pagesDom .pagesDom1{font-size:17px;float:left;margin-top:20px}.pagesDom .pagesDom2{float:right}.pagesDom .pagesDom2 ul{padding-left:0;list-style:none;text-align:center}.pagesDom .pagesDom2 li{display:inline}.pagesDom .pagesDom2 li input{width:26px;text-align:center;height:20px;border:0}.pagesDom .pagesDom2 a{font-size:16px;font-weight:normal;display:inline-block;padding:5px;padding-top:0;color:black;border:1px solid #ddd;background-color:#fff}.pagesDom .pagesDom2 a:hover{background-color:#eee}.pagesDom .ban{opacity:.4}";
           try{
               //for Chrome Firefox Opera Safari
               style .appendChild(document.createTextNode(code));
           }catch(ex){
               //for IE
               style.styleSheet.cssText = code;
           }
           var head = document.getElementsByTagName('head')[0];
           head.appendChild(style);

           $('.pagesDom').append('<div id="pagesDom1" class="pagesDom1"></div>\
               <div id="pagesDom2" class="pagesDom2">\
                   <ul>\
                       <li><a href="###" id="firstPage" οnclick="firstPage()">首页</a></li>\
                       <li><a href="###" id="prePage" οnclick="prePage()">上一页</a></li>\
                       <li><a href="###" id="nextPage" οnclick="nextPage()">下一页</a></li>\
                       <li><a href="###" id="lastPage" οnclick="lastPage()">尾页</a></li>\
                       <li><input type="text" id="jumpWhere" />\
                       </li>\
                       <li><a href="###" id="jumpPage" οnclick="jumpPage()">跳转</a></li>\
                   </ul>\
               </div>')
           //绑定成jQuery插件
           $.fn.createPage = function(fn, count) {
               goPage(count.pageCount, currentPage, fn)
           }
           var pageSize = 0; //每页显示行数
           var currentPage_ = 1; //当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
           var totalPage, totals = 200,currentPage = 1,fns; //总页数
           function goPage(tal, pno, fn) {
               if (fn) {
                   fns = fn
               }
               var num = totals = tal; //表格所有行数(所有记录数)
               pageSize = 10; //每页显示行数
               //总共分几页
               if (num / pageSize > parseInt(num / pageSize)) {
                   totalPage = parseInt(num / pageSize) + 1;
               } else {
                   totalPage = parseInt(num / pageSize);
               }
               currentPage = pno; //当前页数
               currentPage_ = currentPage;
               var tempStr = "共" + num + "条记录当前第 " + currentPage +" / "+ totalPage+ " 页";
               document.getElementById("pagesDom1").innerHTML = tempStr;
               if (currentPage > 1) {
                   $("#firstPage").removeClass("ban");
                   $("#prePage").removeClass("ban");
               } else {
                   $("#firstPage").addClass("ban");
                   $("#prePage").addClass("ban");
               }
               if (currentPage < totalPage) {
                   $("#nextPage").removeClass("ban")
                   $("#lastPage").removeClass("ban")
               } else {
                   $("#nextPage").addClass("ban");
                   $("#lastPage").addClass("ban");
               }
               $("#jumpWhere").val(currentPage);
               fns(currentPage)
               return currentPage;
           }
           function firstPage() {
               goPage(totals, 1);
           }
           function prePage() {
               if (currentPage > 1) {
                   goPage(totals, currentPage - 1);
               }
           }
           function nextPage() {
               if (currentPage < totalPage) {
                   goPage(totals, currentPage + 1);
               }
           }
           function lastPage() {
               goPage(totals, totalPage);
           }
           function jumpPage() {
               var num = parseInt($("#jumpWhere").val());
               if (num != currentPage_ && 1 < num && num <= totalPage) {
                   goPage(totals, num);
               }
           }
       </script>
   </body>
</html>

ZhenGangLiu

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js原生分页插件，易使用易定制

&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset='utf-8'&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="pagesDom" class="pagesDom"&gt;&lt;/div&gt; &am
复制链接

扫一扫