twbs-pagination分页插件的实际应用实例[附在线演示]


  • :
  • 01-04 00:00
  • :
  • 147次
  • :
  • 0条
  • 1赞

简介twbs-pagination分页插件在实际使用中的一个详细实例,及在线演示,通过这个实例,您可以直接复制到自己的网页里,稍加修改后直接使用。

twbs-pagination是一款基于jquery开发的分页插件,使用起来非常的方便,有需要的朋友可以点下面的链接,里面有详细的关于插件的下载,使用和实例的内容:

twbs-pagination分页插件

上一章,站长和大家讲解了如何把twbs-pagination插件应用到自己的网页当中,有忘记或不明白的朋友可以点下面的链接:

twbs-pagination分页插件的使用说明文档

这一章,站长和大家讲解一个在实际应用中的一个具体实例,大家可以先点下面的链接看具体的在线实例演示:

twbs-pagination插件在实际使用中的一个具体实例演示

下面是上面这个在线实例的截图:

下面站长来和大家具体讲解一下如何实际中使用twbs-pagination分页插件

最常见的使用情况就是给网页中的一个信息列表来分页展示,现在假设我们有这样一个列表:

<ul id="PageCon">	
<li>1</li><li>2</li><li>3</li>
<li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li>
<li>10</li><li>11</li><li>12</li>
<li>13</li><li>14</li><li>15</li>
</ul>

现在我们要对上面这个信息列表进行分页展示,先按照上一章介绍的方法,把twbs-pagination插件引入到我们的网页当中,然后开始布置代码:

<script language="javascript">
var pagesize=5;//每页显示几条信息
var totalRecord=$("#PageCon li").length;//获取信息的总数
//计算总页数
var totalPages=totalRecord % pagesize == 0 ? totalRecord / pagesize : Math.ceil(totalRecord / pagesize);
$(function(){	
    $('#PageShowUL').twbsPagination({        
        totalPages: totalPages,//总页数        
        visiblePages:7,//显示的页数        
        version:'1.1',//或1.0  1.1是自动根据当前页动态显示页码		
        first:"首页",		
        prev:"下一页",		
        next:"上一页",		
        last:"尾页",        
        onPageClick: function (event,page) {          	
            $("#PageCon li").hide();          	
            $("#PageCon li").slice((page-1)*pagesize,page*pagesize).show();        
        }    
    });		   
});
</script>

上面的代码中,站长已经备注的非常详细了,只用根据自己的需要,修改一下每页要显示的数目就可以了,如果有哪里不明白的,欢迎给站长留言!

twbs-pagination分页插件—相关文章:


您正在找的文章可能是: