Jquery 动态插入分页数据

  //1.插入的分页 函数封装  获取总的页面数   还有当前的选中的页码
    // insertHtml(6,1);//6,1假设数据
    //一、动态插入数据-------------------------------
    function insertHtml(page,current){//1
        var pagination=$(".ts-page").html('');
        //1.显示首页 上一页 选中页面 大于1 说明可以点击上一页 首页
        // 首页  上一页
        if(current>1){
            pagination.append('首页');
            pagination.append('上一页');
        }else{//current=1 上一页 不可点击
            pagination.remove('.tspage-start');
            pagination.append('上一页');
        }

        //2.显示 ...     首页  上一页 ...   -> 2 3 [4] 5 6   
        if(current > 3 && current <= page ){
            pagination.append('...');
        }

        //3.开始添加页码   首页  上一页 ...  2 3 【4】 5 6 ...   --->分析:  1 2 【3】 4 5 
        //current 选中的  获取页码  current-2  current-1 current  current+1  current+2
        var start=current-2;
        var end=current+2;
        //分析--->    1 【2】 3 4 -->   1 【2】 3 4 5
        if(current==2 || current==1){
            start=1;
            end= page>5 ? 5:page;
        }else if( current == page){// ... 2 3 4 5 6    ... 2 3 [4] 5 6  ... 2 3 4 [5] 6  ... 2 3 4 5 [6] 
            start=current-4;
            end=current;
        }
        else if( current == page-1){
            start=current-3;
            end=current+1;
        }
        //循环显示数据
        for(;start<=end;start++){
            if(start >=1 && end<=page){
                if(start==current){
                    pagination.append(''+start+'');
                }else{
                    pagination.append(''+start+'');
                }            
            }
        }
        //4.添加 后面的 ...  当分页数据 page>5大于5显示不完 显示...
        if(page > 5 && current < page-2){
            pagination.append('...');
        }
        //5.最后的  下一页  尾页
        if(current下一页');
            pagination.append(' 尾页');
        }else{
            pagination.remove('.tspage-end');
            pagination.append(' 下一页');

        }
    }

 HTML代码:


 效果图:Jquery 动态插入分页数据_第1张图片

 

你可能感兴趣的:(Jquery,分页)