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>
  • 相关阅读:
    神经网络反向传播时的梯度计算技巧
    调整Virtual Box硬盘大小
    suse glibcxx版本过高问题
    linux命令之----sort命令用于将文本文件内容加以排序
    ffmpeg编码中的二阻塞一延迟
    Linux下查看编辑二进制文件:hexedit神器
    Unity3D之Mecanim动画系统学习笔记(二):模型导入
    Unity3D之Mecanim动画系统学习笔记(一):认识Mecanim动画系统
    TypeScript学习笔记(六):泛型
    TypeScript学习笔记(五):接口
  • 原文地址:https://www.cnblogs.com/xiao2er/p/10303844.html
Copyright © 2011-2022 走看看