美文网首页
一个js分页及样式

一个js分页及样式

作者: 我的楼兰0909 | 来源:发表于2019-02-21 14:44 被阅读0次
    
$(function(){
    //根据总页数判断，如果小于5页，则显示所有页数，如果大于5页，则显示5页。根据当前点击的页数生成

    //每页显示的数目
    var show_per_page = 10;

    //获取content对象里面，数据的数量
    var number_of_items = $('.total_num').val();
    //计算页面显示的总页数
    var pageCount = Math.ceil(number_of_items/show_per_page);

    //隐藏该对象下面的所有子元素
    $('.airfly_list').children().css('display', 'none');

    //显示第n（show_per_page）元素
    $('.airfly_list').children().slice(0, show_per_page).css('display', 'block');

    //隐藏域默认值
    $('#start_page').val(0);
    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);
    $('#end_page').val(pageCount);

    //生成分页按钮
    if(pageCount>5){
        page_icon(1,5,0);
    }else{
        page_icon(1,pageCount,0);
    }

    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    //点击分页按钮触发
    $("#pageGro li").live("click",function(){
        var curPage = parseInt($(this).html());//获取当前页数

        var pageNum = parseInt($(this).html())-1;//获取当前页数
        var page = pageNum +1;//跳转页码数
        var show_per_page = parseInt($('#show_per_page').val());

        if(pageCount > 5){
            //显示页面
            pageGroup(page,pageCount);
        }else{
            $(this).addClass("on");
            $(this).siblings("li").removeClass("on");
        }

        //请求酒店数据，渲染酒店列表
        setHotelList(curPage);

    });

    //点击上一页触发
    $("#pageGro .pageUp").click(function(){
            var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
            if (pageNum <= 1) {
                var page = pageNum;
            }else{
                var page = pageNum-1;
            }

            if(pageCount > 5){
                pageUp(pageNum,pageCount);
            }else{
                var index = $("#pageGro ul li.on").index();//获取当前页
                if(index > 0){
                    $("#pageGro li").removeClass("on");//清除所有选中
                    $("#pageGro ul li").eq(index-1).addClass("on");//选中上一页
                }
            }
            //请求酒店数据，渲染酒店列表
            setHotelList(page);
    });
    
    //点击下一页触发
    $("#pageGro .pageDown").click(function(){

            var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
            var page = pageNum;
            if (pageNum===pageCount) {
                page = pageCount;
            }else{
                page = pageNum+1;
            }

            if(pageCount > 5){
                pageDown(pageNum,pageCount);
            }else{
                var index = $("#pageGro ul li.on").index();//获取当前页
                if(index+1 < pageCount){
                    $("#pageGro li").removeClass("on");//清除所有选中
                    $("#pageGro ul li").eq(index+1).addClass("on");//选中上一页
                }
            }
            //请求酒店数据，渲染酒店列表
            setHotelList(page);
    });

    //点击首页
    $("#pageGro .pagestart").live("click",function(){
            var page = $('#start_page').val();

            if (pageCount > 5) {
                //显示页码
                pageGroup(1,pageCount);
            }else{
                var index = $("#pageGro ul li.on").index();//获取当前页
                if(index < pageCount){
                    $("#pageGro li").removeClass("on");//清除所有选中
                    $("#pageGro ul li:first").addClass("on");
                }
            }
            //请求酒店数据，渲染酒店列表
            setHotelList(page);
    });

    //点击尾页
    $("#pageGro .pageend").live("click",function(){
            var pageNum1 = $('#end_page').val();
            var pagenum = pageNum1-2
            var page = pageNum1;

            if (pageCount > 5) {
                //显示页码
                pageGroup(pagenum,pageNum1);
                $("#pageGro ul li:last-child").addClass("on").siblings().removeClass("on");
            }else{
                var index = $("#pageGro ul li.on").index();//获取当前页
                if(index < pageCount){
                    $("#pageGro li").removeClass("on");//清除所有选中
                    $("#pageGro ul li:last-child").addClass("on");
                }
            }

            setHotelList(page);
    });
});

//点击跳转页面
function pageGroup(pageNum,pageCount){
    switch(pageNum){
        case 1:
            page_icon(1,5,0);
        break;
        case 2:
            page_icon(1,5,1);
        break;
        case pageCount-1:
            page_icon(pageCount-4,pageCount,3);
        break;
        case pageCount:
            page_icon(pageCount-4,pageCount,4);
        break;
        default:
            page_icon(pageNum-2,pageNum+2,2);
        break;
    }
}

//根据当前选中页生成页面点击按钮
function page_icon(page,count,eq){
    var ul_html = "";
    for(var i=page; i<=count; i++){
        ul_html += "<li>"+i+"</li>";
    }
    $("#pageGro ul").html(ul_html);
    $("#pageGro ul li").eq(eq).addClass("on");
}

//上一页
function pageUp(pageNum,pageCount){
    switch(pageNum){
        case 1:
        break;
        case 2:
            page_icon(1,5,0);
        break;
        case pageCount-1:
            page_icon(pageCount-4,pageCount,2);
        break;
        case pageCount:
            page_icon(pageCount-4,pageCount,3);
        break;
        default:
            page_icon(pageNum-2,pageNum+2,1);
        break;
    }
}

//下一页
function pageDown(pageNum,pageCount){
    switch(pageNum){
        case 1:
            page_icon(1,5,1);
        break;
        case 2:
            page_icon(1,5,2);
        break;
        case pageCount-1:
            page_icon(pageCount-4,pageCount,4);
        break;
        case pageCount:
        break;
        default:
            page_icon(pageNum-2,pageNum+2,3);
        break;
    }
}


//请求酒店数据
function setHotelList(page) {
    if(page == 0){
        page = 1;
    }
    var frmdata = $("#search_data").serializeObject();
    var city_id = $('.city_id').val();
    frmdata.page = page;
    frmdata.city_id = city_id;

    var json = getPostData();
    $.extend(frmdata,json);

    $('#current_page').val(page);
    // console.log(frmdata);
    // return false;
    $.post(SITEURL+'rummery/search_ajax', frmdata, function (data) {
        //console.log(data);
        var list = data.hotel_list.HotelList;
        var html = '';
        for(i in list){
            html += '<tr>'+
                '<td class="hotel_search_hotel_pic " style="padding-left: 20px;padding-top: 20px;">';
            if(list[i]['img_list'].length === 0){
                html += '<img style="width: 180px;height: 120px" src="/res/images/hotel/hos_13.png" alt="hotel"/>';
            }else{
                html += '<img style="width: 180px;height: 120px" src="'+list[i]['img_list'][0]['ImgURL']+'" alt="hotel"/>';
            }
            html += '</td>'+
                '<td class="hotel_search_hotel_content">'+
                '<span class="content_num">'+list[i]['k']+'</span>'+
                '<span class="content_title">'+list[i]['name_chn']+'</span><br>'+
                '<span class="content_add">'+list[i]['address']+'</span>'+
                '<span class="content_map">【查看地图】</span><br><br>'+
                '<span class="content_score">”交通还是很方便的，离各个区都近“</span>'+
                '</td>'+
                '<td class="hotel_search_hotel_score">'+
                '<span class="score_title">'+list[i]['comment_score']+'</span>'+
                '<span class="score_tile2">/100分</span><br>'+
                '<span class="score_txt">'+list[i]['comment_count']+'条用户点评</span>'+
                '</td>'+
                '<td class="hotel_search_hotel_price">'+
                '<span class="price_title1">￥</span>'+
                '<span class="price_title2">'+list[i]['ReferenceAmount']+'</span>'+
                '<span class="price_title3">起</span><br>'+
                '<span class="price_btn">查看详情</span>'+
                '</td>'+
                '</tr>';
        }
        $('#hotel_list_fly').html(html);
        $('.total_night').text(data.total_night);
        $('.total_num').val(data.total);
        $('.hlist').text(data.hlist);
        var show_per_page = 10;
        var pageCount = Math.ceil(data.total/show_per_page);

        //生成分页按钮
        if(pageCount>5){
            page_icon(1,5,0);
        }else{
            page_icon(1,pageCount,0);
        }
        setMap(map);
        $('html,body').animate({scrollTop: '400px'}, 800);

    },'json');
}

    
$(function(){

    //根据总页数判断，如果小于5页，则显示所有页数，如果大于5页，则显示5页。根据当前点击的页数生成

    //每页显示的数目
    var show_per_page = 10;

    //获取content对象里面，数据的数量
    var number_of_items = $('.airfly_list').children().size();

    //计算页面显示的总页数
    var pageCount = Math.ceil(number_of_items/show_per_page);

    //隐藏该对象下面的所有子元素
    $('.airfly_list').children().css('display', 'none');

    //显示第n（show_per_page）元素
    $('.airfly_list').children().slice(0, show_per_page).css('display', 'block');

    //隐藏域默认值
    $('#start_page').val(0);
    $('#current_page').val(0);
    $('#show_per_page').val(show_per_page);
    $('#end_page').val(pageCount);

    //生成分页按钮
    if(pageCount>5){
        page_icon(1,5,0);
    }else{
        page_icon(1,pageCount,0);
    }

    //点击分页按钮触发
    $("#pageGro li").live("click",function(){
            var pageNum = parseInt($(this).html())-1;//获取当前页数

            var page = pageNum +1;//跳转页码数
            var show_per_page = parseInt($('#show_per_page').val());

            //开始
             start_from = pageNum * show_per_page;

            //结束
            end_on = start_from + show_per_page;

            //隐藏内容ul的所有子元素，获取特定项目并显示它们
            $('.airfly_list').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
        if(pageCount > 5){
            //显示页面
            pageGroup(page,pageCount);
        }else{

            $(this).addClass("on");
            $(this).siblings("li").removeClass("on");
        }
    });

    //点击上一页触发
    $("#pageGro .pageUp").click(function(){
            var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
            if (pageNum <= 1) {
                var page = pageNum;
            }else{
                var page = pageNum-1;
            }
            var show_per_page = parseInt($('#show_per_page').val());

            //开始
             start_from = page * show_per_page - show_per_page;

            //结束
            end_on = start_from + show_per_page;

            //隐藏内容ul的所有子元素，获取特定项目并显示它们
            $('.airfly_list').children().css('display', 'none').slice(start_from,end_on).css('display', 'block');
        if(pageCount > 5){
            pageUp(pageNum,pageCount);
        }else{
            var index = $("#pageGro ul li.on").index();//获取当前页
            if(index > 0){
                $("#pageGro li").removeClass("on");//清除所有选中
                $("#pageGro ul li").eq(index-1).addClass("on");//选中上一页
            }
        }
    });
    
    //点击下一页触发
    $("#pageGro .pageDown").click(function(){

            var pageNum = parseInt($("#pageGro li.on").html());//获取当前页
            var page = pageNum;
            if (pageNum===pageCount) {
                page = pageNum-1;
            }
            var show_per_page = parseInt($('#show_per_page').val());
            //开始
             start_from = page * show_per_page;

            //结束
            end_on = start_from + show_per_page;

            //隐藏内容ul的所有子元素，获取特定项目并显示它们
            $('.airfly_list').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
        if(pageCount > 5){
            pageDown(pageNum,pageCount);
        }else{
            var index = $("#pageGro ul li.on").index();//获取当前页

            if(index+1 < pageCount){
                $("#pageGro li").removeClass("on");//清除所有选中
                $("#pageGro ul li").eq(index+1).addClass("on");//选中上一页
            }
        }
    });

    //点击首页
    $("#pageGro .pagestart").live("click",function(){
            var pageNum = $('#start_page').val();

            //开始
             start_from = pageNum * show_per_page;

            //结束
            end_on = start_from + show_per_page;

            //隐藏内容ul的所有子元素，获取特定项目并显示它们
            $('.airfly_list').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
        if (pageCount > 5) {

            //显示页码
            pageGroup(1,pageCount);
        }else{

            var index = $("#pageGro ul li.on").index();//获取当前页

            if(index < pageCount){
                $("#pageGro li").removeClass("on");//清除所有选中
                $("#pageGro ul li:first").addClass("on");
            }
        }
    });

    //点击尾页
    $("#pageGro .pageend").live("click",function(){
        var pageNum1 = $('#end_page').val();
            var pagenum = pageNum1-2
                var page = pageNum1-1;

            //开始
             start_from = page * show_per_page;

            //结束
            end_on = start_from + show_per_page;

            //隐藏内容ul的所有子元素，获取特定项目并显示它们
            $('.airfly_list').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

        if (pageCount > 5) {

            //显示页码
            pageGroup(pagenum,pageNum1);
            $("#pageGro ul li:last-child").addClass("on").siblings().removeClass("on");
        }else{

            var index = $("#pageGro ul li.on").index();//获取当前页

            if(index < pageCount){
                $("#pageGro li").removeClass("on");//清除所有选中
                $("#pageGro ul li:last-child").addClass("on");
            }
        }

    });
});

//点击跳转页面
function pageGroup(pageNum,pageCount){
    switch(pageNum){
        case 1:
            page_icon(1,5,0);
        break;
        case 2:
            page_icon(1,5,1);
        break;
        case pageCount-1:
            page_icon(pageCount-4,pageCount,3);
        break;
        case pageCount:
            page_icon(pageCount-4,pageCount,4);
        break;
        default:
            page_icon(pageNum-2,pageNum+2,2);
        break;
    }
}

//根据当前选中页生成页面点击按钮
function page_icon(page,count,eq){
    var ul_html = "";
    for(var i=page; i<=count; i++){
        ul_html += "<li>"+i+"</li>";
    }
    $("#pageGro ul").html(ul_html);
    $("#pageGro ul li").eq(eq).addClass("on");
}

//上一页
function pageUp(pageNum,pageCount){
    switch(pageNum){
        case 1:
        break;
        case 2:
            page_icon(1,5,0);
        break;
        case pageCount-1:
            page_icon(pageCount-4,pageCount,2);
        break;
        case pageCount:
            page_icon(pageCount-4,pageCount,3);
        break;
        default:
            page_icon(pageNum-2,pageNum+2,1);
        break;
    }
}

//下一页
function pageDown(pageNum,pageCount){
    switch(pageNum){
        case 1:
            page_icon(1,5,1);
        break;
        case 2:
            page_icon(1,5,2);
        break;
        case pageCount-1:
            page_icon(pageCount-4,pageCount,4);
        break;
        case pageCount:
        break;
        default:
            page_icon(pageNum-2,pageNum+2,3);
        break;
    }
}

               <div id="pageGro" class="cb">
                    <div class="pagestart">首页</div>
                    <div class="pageUp">上一页</div>
                    <div class="pageList">
                        <ul></ul>
                    </div>
                    <div class="pageDown">下一页</div>
                    <div class="pageend">尾页</div>
                    <input type="hidden" id="start_page">
                    <input type="hidden" id="current_page" />
                    <input type="hidden" id="show_per_page" />
                    <input type="hidden" id="end_page">
            </div>

    #pageGro{clear: both;  margin:0px auto; padding:30px 0;text-align: center;}
#pageGro div,#pageGro div ul li{ font-size:16px; color:#333; line-height:30px; display: inline-block;cursor: pointer;}
#pageGro div ul li{ margin:0 1px;padding: 9px 10px; background:#fff;  min-width: 28px;height: 30px; text-align:center; border:1px solid #e4e4e4; cursor:pointer;}
#pageGro div ul li.on{ color:#fff; background:#50ad6b; border-color:#50ad6b;}
#pageGro .pageUp,#pageGro .pageDown,#pageGro .pagestart,#pageGro .pageend{padding: 9px 20px; text-align: center; border:1px solid #e4e4e4;background: #fff; cursor:pointer;}
#pageGro .pageUp:hover,#pageGro .pageDown:hover,#pageGro .pagestart:hover,#pageGro .pageend:hover,#pageGro div ul li:hover{ color:#fff; background:#50ad6b; border-color:#50ad6b;}

    相关文章

      网友评论

          本文标题：一个js分页及样式

          本文链接：https://www.haomeiwen.com/subject/ghiryqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|一个js分页及样式|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！