zoukankan      html  css  js  c++  java
  • JavaScript显示分页按钮

    /**
     * 获取分页按钮
     * @param total_page     总页数
     * @param current_page  当前页
     * @param num                    每页显示多少个分页按钮
     * @returns {String}
     */
    function get_page_html(total_page,current_page,num){
        
        var page_html = "";
        if(isNaN(total_page) && isNaN(current_page)){
            
        }else{
            //范围判断
            if(current_page>total_page) {
                current_page = total_page;
            }
            
            // 当前页的前后各显示多少页
            var count = Math.floor(num/2);
            
            // 当前页后面要显示的页数
            var after_count = count;
            if(count-current_page>0){
                after_count += (count-current_page);
            }
            if(total_page<=1) {
                //只有一页
                page_html += '<ul class="pagination">';
                page_html += '<li class="active"><a href="javascript:pageQuery(1)">1</a></li>';
                page_html += '</ul>';
            }else if(total_page<=num){
                page_html += '<ul class="pagination">';
                 //把页数全部显示出来
                for(var i=1;i<=total_page;i++) {
                    if(current_page==i){
                           page_html += '<li class="active"><a href="javascript:pageQuery('+current_page+')">'+current_page+'</a></li>';
                    }else{
                           page_html += '<li><a href="javascript:pageQuery('+i+')">'+i+'</a></li>';
                    }
                }
                page_html += '</ul>';
            }else {
                page_html += '<ul class="pagination">';
                
                //显示前一页按钮
                if(current_page-count>1) {
                    page_html += '<li><a href="javascript:pageQuery('+(current_page-1)+')">&laquo;</a></li>';
                }
                //显示当前页前面的页码按钮
                for(var i=count;i>=1;i--) {
                    if(current_page-i>0){
                        page_html += '<li><a href="javascript:pageQuery('+(current_page-i)+')">'+(current_page-i)+'</a></li>';
                    }
                }
                
                // 当前页按钮
                page_html += '<li class="active"><a href="javascript:pageQuery('+current_page+')">'+current_page+'</a></li>';
            
                // 显示当前页后面的页码按钮
                for(var j=1;j<=after_count;j++){
                    if((current_page+j)<=total_page){
                        page_html += '<li><a href="javascript:pageQuery('+(current_page+j)+')">'+(current_page+j)+'</a></li>';
                    }
                }
                
                //显示后一页按钮
                if(current_page+count<total_page){
                    page_html += '<li><a href="javascript:pageQuery('+(current_page+1)+')">&raquo;</a></li>';
                }
                page_html += '</ul>';
            }
        }
        return page_html;
    }

    效果

  • 相关阅读:
    梦断代码阅读笔记03
    第十二周进度条
    找“水王”
    梦断代码阅读笔记02
    梦断代码阅读笔记01
    团队开发第二阶段个人博客(2)
    团队开发第二阶段个人博客(1)
    个人总结
    第16周学习进度条
    个人进度条第15周
  • 原文地址:https://www.cnblogs.com/luxh/p/3807098.html
Copyright © 2011-2022 走看看