zoukankan      html  css  js  c++  java
  • 前端分页(js)

    //前端分页
    var limit = 10; //每页显示数据条数
    var total = $('#host_table').find('tr').length;
    var allPage = total%limit>0?parseInt(total/limit)+1:parseInt(total/limit);
    
    function doPage(n){
        if(allPage>1){
            var prevPage='',nextPage='',pageHtml='';
    
            if (n===1) {
                prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
            } else if(n===allPage){
                prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
            } else {
                prevPage = '<li data-page="'+ (n-1) +'"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="'+ (n+1) +'"><a href="javascript:;">下一页</a></li>';
            }
    
            if (n<=5){
                for(var i=1;i<=5;i++){
                    if (n===i) {
                        pageHtml += '<li class="active"><a href="javascript:;">'+ i +'</a></li>';
                    }else{
                        if(i<=allPage) {
                            pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
                        }
                    }
    
                }
            }else{
                for(var i=1;i<=5;i++){
    
                    cur_page = parseInt(parseInt((n-1)/5)*5);
    
                    if (n===(cur_page+i)){
                        pageHtml += '<li class="active"><a href="javascript:;">'+ (cur_page+i) +'</a></li>';
                    }else{
                        if((i+cur_page)<=allPage){
                            pageHtml += '<li data-page="'+ (i+cur_page) +'"><a href="javascript:;">'+ (i+cur_page) +'</a></li>';
                        }
                    }
    
                }
    
            }
    
    
            $('#pagination').html(prevPage+pageHtml+nextPage);
        }
    
        $('#host_table').find('tr').hide();
        if(n===1){
            $('#host_table').find('tr:lt('+ limit +')').show();
        }else{
            $('#host_table').find('tr:gt('+ ((n-1)*limit-1) +'):lt('+ limit +')').show();
        }
    
    }
    
    doPage(1);
    
    $('#pagination').on('click', 'li a', function(event) {
        event.preventDefault();
        var curr = parseInt($(this).parent().data('page'));
    
        if (!isNaN(curr)) {
            doPage(curr);
        }
    });
     <div class="text-right" style="margin-top:-30px;padding-right:9%">
         <ul class="pagination" id="pagination"></ul>
    </div>
  • 相关阅读:
    python 基于os模块的常用操作
    python 文件的读写
    Spring Boot 2.0(五):Docker Compose + Spring Boot + Nginx + Mysql 实践
    Docker(四):Docker 三剑客之 Docker Compose
    Docker(三):Dockerfile 命令详解
    Docker(二):Dockerfile 使用介绍
    Docker(一):Docker入门教程
    虚拟机vmware centos7 扩展磁盘空间
    那些年我们遇到的坑(1)-Description Resource Path Location Type Archive for required library
    RPM安装命令总结
  • 原文地址:https://www.cnblogs.com/xiao2er/p/10303844.html
Copyright © 2011-2022 走看看