分页器的使用-1 自己找的分页器插件

最新推荐文章于 2025-07-18 07:56:23 发布

小城听风雨

最新推荐文章于 2025-07-18 07:56:23 发布

阅读量599

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript踩过的坑文章标签： js分页器分页器插件页面中怎么加入分页器 html分页器

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/a5252145/article/details/85262861

Javascript踩过的坑专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一款自定义的前端分页插件，详细展示了如何利用jQuery和自定义JS文件实现动态分页功能，包括引入必要的CSS和JS资源、设置当前页码、请求数据并动态生成页面内容。

这个插件是自己网上找的，具体代码如下：

具体步骤：
	1. 先引入css和js
	2. 分页器放在请求成功之后，
	3. 最重要的中间件就是currentPage：当前页码。
	4. 具体代码详情都在里面写清楚了。

用到的js文件：

https://pan.baidu.com/s/1JPuWpajTqU0CTzXUVPXG2Q

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <!-- 这三个是必须引入的 -->
    <link rel="stylesheet" href="css/paging.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/paging.js"></script>


    <link rel="stylesheet" href="css/search.css">
    <script src="js/interface.js"></script>
</head>
<body>
    <section>
        <!-- 搜索部分 -->
        <div class="list_pagination">
            
        </div>

        <!-- 分页 -->
        <div class="box"></div>
    </section>

    <script>
        // 当前页数
        var currentPage = 1;

        // 一页显示的数量  
        var count = 5;

        // 总页数  默认为0
        var pageCount = 0;

        // 请求搜索接口  形参为页码，从分页器那里获取  当第一次加载页面时，在执行函数时传进来一个currentPage = 1;
        function downloadData (page) {
            // 把熊分页器那里拿到的page赋给currentPage
            currentPage = page
            
            // 定义url中的start  也就是第几页  接口是从start=0开始,第二页的start=5,第三页start=15,也就是(current - 1)*count 
            var start = (currentPage - 1)*count
            
             // 获取list
             var liPagination = $(".list_pagination")
            // 获取url  count：页数  start:开始页数  keyword：搜索关键字
            var url = searchUrl+"&start="+(page-1)*count+"&count="+count+"&keyword="+""
            
            // 数据请求
            $.getJSON(url,{},function (data) {
                
                // 成功之后先把liPagination节点删除，再放进去新的数据
                $(".list_pagination_index").remove();
                // 数据成功，遍历数据放在节点中
                for(var item of data.data){
                    // console.log(item.id)
                    var li = document.createElement('li');

                    li.innerHTML = `<div class="list_pagination_index" id="box">
                                        <img src="${imagePrefix}${item.img_url}" alt="">
                                        <div class="count">
                                            <div class="title">
                                                ${item.title}
                                            </div>
                                            <div>
                                                <div class="time_1">
                                                    <span>//</span> 
                                                    <span>TAG:</span>
                                                </div>
                                                <span class="time">${item.post_date}</span>
                                            </div>
                                            <p>
                                                ${item.forward}    
                                            </p>
                                        </div>
                                    </div>
                                    `
                    //把节点一个个放在网页中 
                    liPagination.append(li);
                }
                

                // 拿到数据中的总数
                var total = data.total

                // 通过ceil向上取整得到总页数  pageCount为前面的全局变量
                pageCount = Math.ceil(total / count)
                
                // 分页
                $('.box').paging({
                    initPageNo: currentPage, // 初始页码  初始值为1
                    totalPages: pageCount, //总页数 总页数在data数据中得到
                    slideSpeed: 600, // 缓动速度。单位毫秒
                    // jump: true, //是否支持跳转
                    callback: function(page) { // 回调函数
                        
                        // 因为分页器一直处于数据请求函数中，而downloadData()函数传进来的page直接赋给了currentPage，
                        // 在downloadData()函数中，page一直等于currentPage，就会一直请求数据下载
                        //因此当page和当前页相同时退出，不执行downloadData(), 避免多次下载数据
                        if(page == currentPage){
                            return
                        }
                        // console.log(page)
                        // 重新获取数据  调用search搜索函数  把页码传出去
                        downloadData(page)
                    }
                });
            })
        }
		downloadData(currentPage)
    </script>
</body>
</html>

具体效果如下：

在这里插入图片描述