热门关键字:
jquery > jquery教程 > jquery教程 > 分页插件 jquery.pagination.js,

分页插件 jquery.pagination.js,

305
作者:管理员
发布时间:2020/2/18 19:22:34
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=827

引用

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="librarys/fenye/pagination.css">
<script src="librarys/fenye/jquery.pagination.js"></script>

html

<div class="nav">

</div>

css

.nav{
     text-align: center;
     padding: 0 1rem;
}
.nav a{
    color: #C8C8C8;
    border:1px solid #C8C8C8;
    display: inline-block;
    padding: 0.2rem 0.4rem;
    line-height: 1rem;
    text-align:center;
    margin:0.1rem 0.1rem;
    text-decoration: none !important;
}

js

// 分页
$('.nav').pagination({
    pageCount:10, //总页数
    coping: true, //开启首页末页
    homePage: '首页',
    endPage: '末页',
    prevContent: '上页',
    nextContent: '下页',
    callback:function(index){                            //实现功能的回调

        page = parseInt($('.nav span').html())               //获取被选中页数的值
        if(page==1){
             $('.list ul').empty()
             getlist()                                          //重新获取数据
        }else{
             $('.list ul li').hide()
             getlist()
        }
    }
})






如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐