【转载】前端分页，已知数据的情况

自定义分页功能实现

最新推荐文章于 2022-02-26 21:00:00 发布

weixin_34175509

最新推荐文章于 2022-02-26 21:00:00 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/JaneBlog/p/7757889.html

本文介绍了一种使用JavaScript和HTML实现自定义分页的方法。该方法通过将数据存储到数组中，然后根据用户的选择显示特定页的数据。此外，还讨论了如何在页面数量过多时仅显示前后页码，用省略号代替中间页码。

转载网址：http://blog.youkuaiyun.com/liuyeshennai/article/details/50792889

下面是根据转载网址中的 js 脚本，修改为自己可用的 js 代码及页码部分的 html：

html:

<div id='page' onselectstart="return false;" style="-moz-user-select: none;-webkit-user-select: none;">
    <span value="" class="prev" >上一页</span>
    <span value="" class="next">下一页</span>
</div>

JS :

<script type="text/javascript">
$(function(){
    $(".ms-breadcrumbCurrentNode").text("通知");
    var page_container = $(".cbq-layout-main ul");//项目（原）容器
    var page_len = $(".dfwp-item").length;// 获取项目总数目
    var page_item = $(".dfwp-item");//原项目
    var new_data = []; // 项目转存（新）容器    
    
    //项目转存到数组新容器
    for(var i = 0 ; i < page_len ; i ++){
        var data = page_item.eq(i).clone(true);
        new_data.push(data);
    }
    
    var Count = new_data.length; //记录条数  
    var PageSize = 30; //设置每页示数目  
    var PageCount = Math.ceil(Count / PageSize); //计算总页数 
    var current_page = 1; //当前页，默认为1。     
    
    //清空原本项目容器
    $(".cbq-layout-main ul").empty();    
      
    //造个简单的分页按钮  
    for(var i = 1; i <= PageCount; i++) {
        var pageN = '<a href="javascript:void(0);" value="' + i + '">' + i + '</a>';
        $(pageN).insertBefore($('#page span:last'));
    }
    
    //默认显示第一页内容
    click_page(current_page);
    
    //显示选择页的内容  
    $('#page a').click(function() {
        var selectPage = $(this).attr('value');
        click_page(selectPage);
    });
        
    //上一页
    $(".prev").click(function(){
        current_page = get_page();//得到在点击上一页之前拥有selects类的页码，也就是在点击上一页之前所显示的页码
        //console.log("点击上一页时的页码 :  "+current_page);
        if((current_page-1) == 0){
            //alert("已经是第一页");
            return false;
        }
        click_page((current_page-1));
    });
    
    //下一页
    $(".next").click(function(){
        current_page = get_page();
        //console.log("点击下一页时的页码 :  "+current_page);
        if(current_page >= PageCount){
            //alert("已经是最后一页");
            return false;
        }
        click_page((current_page+1));
    });

    //获取已被点击的当前页码
    function get_page(){
        var temp_page = 0;
        for(var i  = 1; i <= PageCount; i ++){
            if($("#page a").eq(i-1).hasClass("sel_page")){
                temp_page = i;//获取已被点击的当前页码
                break;
            }
        }
        return temp_page;
    }
    
    // 切换页码
    function click_page(selectPage){
        $("#page a").siblings().removeClass("sel_page");
        $("#page a").eq(selectPage-1).addClass("sel_page");//让当前页与其它页样式有所区分
        page_container.empty();
        for(i = (selectPage - 1) * PageSize; i < PageSize * selectPage; i++) {
            page_container.append(new_data[i]);
        }
    }

复制网上，当页码超出某个长度，只显示前后的页码，中间省略号，还未修改。

function makePage (total, page) {//生成页码
            var pages = [];

            function createPage(index){//单页码生成
                if(page==index){
                    pages.push('<strong>' + page + '</strong>');
                }else{
                    pages.push('<a class="page-link" href="javascript:void(0);">' + index + '</a>');
                }
            }
            if(total<=10){
                for(var i=1;i<=total;i++){
                    createPage(i);
                }
            }else{
                if(page <= 5) {//总页数大于10且当前页远离总页数(小于5)
                     for(var i = 1; i <=5; i++) {
                        createPage(i);
                     }
                    pages.push(' … <a class="page-link" href="javascript:void(0);">' + total + '</a>');
                }else if(page>=total-3){//总页数大于10且当前页接近总页数(小于总页数-3)
                    pages.push('<a class="page-link" href="javascript:void(0);">' + 1 + '</a> …');
                    for(var i=total-4;i<=total;i++){
                        createPage(i);
                    }
                }else{ //除开上面两个情况
                    pages.push('<a class="page-link" href="javascript:void(0);">' + 1 + '</a> … ');
                    for(var i=page-2;i<=page+2;i++){
                         createPage(i);
                    }
                     pages.push(' … <a class="page-link" href="javascript:void(0);">' + total + '</a>');
                }
            }

            if (page > 1 && total > 1) {// 上一页
                pages.unshift('<a class="js-page-change page-prev" href="javascript:void(0);">上页</a>');
            } else {
                pages.unshift('<span>上页</span>');
            }
            if (page < total && total > 1) {// 下一页
                pages.push('<a class="js-page-change page-next" href="javascript:void(0);">下页</a>');
            } else {
                pages.push('<span>下页</span>');
            }
            contentDom.html(tpl.replace("{pages}", pages.join(" ")));
        }