移动端jquery分页

爱吃彩虹吐司的安琪拉

已于 2023-01-10 14:17:18 修改

阅读量734

点赞数 1

分类专栏： # JavaScript 文章标签： jquery html 前端 javascript html5

于 2021-07-26 16:57:30 首次发布

本文链接：https://blog.csdn.net/weixin_44264769/article/details/119112792

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、引入css

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

可从链接下载或者直接引入。

二、引入js

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>

可从链接下载或者直接引入。

三、具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <title>移动端分页</title>
</head>
<body>
    <div id="pageBox" style="width:0 auto 1.5rem;text-align: center;">
    </div>
</body>
</html>
<script>
    paging(200);
    function paging(count1,pageSize1,pageNumber1) {
      var count = count1,
      pageSize = pageSize1?pageSize1:20,
      pageNumber = pageNumber1?pageNumber1:1, 
      edges = 2,
      showpage = 2,
      pages = Math.ceil(count / pageSize);
      if(count !=0 || count != '' || count != undefined){
        renderPage();
      }
      function renderPage() {
        $ul = $('<ul class="pagination"></ul>');
        var start = 1;
        var end = pages;
        if (showpage % 2) {
          //showpage是奇数
          start = pageNumber - Math.floor(showpage / 2);
          end = pageNumber + Math.floor(showpage / 2);
        } else {
          //showpage是偶数
          start = pageNumber - (showpage / 2 - 1);
          end = pageNumber + showpage / 2;
        }
        if (start <= edges + 1) {
          start = 1;
          if (end < showpage && showpage<pages) {
              end = showpage;
          }
        } else {
          for (var i = 1; i <= edges; i++) {
            $ul.append(render(i));
          }
          $ul.append('<li><span>...</span></li>')
        }
        if (end < pages - edges) {
          for (var i = start; i <= end; i++) {
            $ul.append(render(i));
          }
          $ul.append('<li><span>...</span></li>');
          for (var i = pages - edges + 1; i <= pages; i++) {
            $ul.append(render(i));
          }
        } else {
          end = pages;
          if(start>pages-showpage+1){
            start = pages-showpage+1
          }
          for (var i = start; i <= end; i++) {
            $ul.append(render(i));
          }
        }
        $ul.prepend(renderPrev());
        $ul.append(renderNext());
        $('#pageBox').empty().append($ul);
      }

      function render(i) {
        $item = $('<li><a href="#">' + i + '</a></li>');
        if (i == pageNumber) {
          $item.addClass('active');
        }
        $item.on('click', (function (num) {
          return function () {
            pageNumber = num;
            renderPage();
          }
        })(i));
        return $item
      }

      function renderPrev() {
        $prev = $('<li><a href="#">&laquo;</a></li>');
        if (pageNumber == 1) {
          $prev.addClass('disabled');
        } else {
          $prev.on('click', function () {
            pageNumber = pageNumber - 1;
            renderPage();
          })
        }
        return $prev;
      }

      function renderNext() {
        $next = $('<li><a href="#">&raquo;</a></li>');
        if (pageNumber == pages) {
          $next.addClass('disabled');
        } else {
          $next.on('click', function () {
            pageNumber = pageNumber + 1;
            renderPage();
          })
        }
        return $next;
      }
    }
</script>

这是一个比较简单的代码，若是有其他的功能也可进行修改，无非就是多传几个参数，若是想要发送请求的话，可以在内部调用一下发请求的函数，页面布局时也注意css取名就可以了。

爱吃彩虹吐司的安琪拉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端jquery分页

以下是在以前所写的一个jquery的移动端分页，希望对大家有所帮助！一、引入css<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384
复制链接

扫一扫