<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head> <script>
$(document).ready(function(){ //定义变量,获取总页数,获取当前页数,开始页数和结束页数
var pageCount=10,currentPage= 1,startPage= 1,endPage=5;
if(endPage>pageCount){
endPage = pageCount;
}
//初始化额时候,设置第一页为选定状态
setPagehtml(); //给上一页和下一页添加时间
$("#btn_prev").on("click",function(){
prev()
});
$("#btn_next").on("click",function(){
next()
}); //根据startpage和endPage拼接分页的元素。
function getPageHtml(){
var htmlPage = "";
for( var i = startPage; i <= endPage; i++ ){
(function(k){
htmlPage+= "<li class='li'><a href='#' class='pageIndex'>"+k+"</a></li>"
})(i);
}
return htmlPage;
} //将凭借的pagehmml放入到正确的位置,并且给与当前页被选中的状态
function setPagehtml(){
$("li").remove(".li");
var str = getPageHtml();
$("#startPage").after(str);
$('li').removeClass("active");
$('li').filter(function(index) {
return $('a', this).text() == currentPage;
}).addClass("active");
} function next(){
//点击下一页的时候
if(currentPage == pageCount){
//donothing
return ;
}else{
if(currentPage==endPage){
endPage++;
startPage++;
}
currentPage++; }
setPagehtml()
} function prev(){
//点击下一页的时候
if(currentPage == 1){
//donothing
return ;
}else {
if (currentPage == startPage) {
startPage--;
endPage--;
}
currentPage--;
}
setPagehtml() } $(".pageIndex").live("click",function(){
console.log($(this).text())
currentPage = $(this).text();
setPagehtml()
})
}) </script> <body> <div class="container">
<ul class="pagination"> <li id="startPage"><a href="#" id="btn_prev">上一页</a></li>
<li><a href="#" id="btn_next" >下一页</a></li> </ul>
</div> </body>
</html>

基于bootstrap分页的更多相关文章

  1. 基于Bootstrap仿淘宝分页控件实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  2. 基于Bootstrap的Asp.net Mvc 分页

    基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...

  3. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  4. 基于Bootstrap的Asp.net Mvc 分页的实现

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这边是模拟了一些 ...

  5. 基于Bootstrap的Asp.net Mvc 分页的实现(转)

    最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...

  6. 基于avalon+jquery做的bootstrap分页控件

    刚开始学习avalon,项目需要就尝试写了个分页控件Pager.js:基于BootStrap样式这个大家都很熟悉 在这里推荐下国产前端神器avalon:确实好用,帮我解决了很多前端问题. 不多说了,代 ...

  7. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  8. bootstrap-paginator基于bootstrap的分页插件

    bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...

  9. 基于bootstrap的分页插件

    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...

随机推荐

  1. jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation

    jQuery-2.1.4.min.js:4 Uncaught TypeError: Illegal invocation 此错误与crsf有关

  2. Apache服务器配置技巧

    1.如何设置请求等待时间 在httpd.conf里面设置: TimeOut n 其中n为整数,单位是秒. 设置这个TimeOut适用于三种情况: 2.如何接收一个get请求的总时间 接收一个post和 ...

  3. 如何使Android应用开机时自动启动

    先记下来,主要是继承BroadcastReceiver实现.还有开机自动启动service的,好像是继承 IntentReceiver,不知道有什么不一样,有时间试试. 一: 简单 Android也有 ...

  4. vb6 调用 64位应用程序

    Option Explicit Private Declare Function LoadLibrary Lib "kernel32.dll" Alias "LoadLi ...

  5. NET-SNMP配置

    配置/etc/snmp/snmpd.conf such as below : ============================================== com2sec notCon ...

  6. Mabitis 多表查询(一)resultType=“java.util.hashMap”

    1.进行单表查询的时候,xml标签的写法如下 进行多表查询,且无确定返回类型时 xml标签写法如下: <select id="Volume" parameterType=&q ...

  7. Elasticsearch查询

    Elasticsearch支持两种类型的查询:基本查询和复合查询. 基本查询,如词条查询用于查询实际数据. 复合查询,如布尔查询,可以合并多个查询, 然而,这不是全部.除了这两种类型的查询,你还可以用 ...

  8. 解决TalbleView头部或底部子控件不显示问题

    在自定义cell头部控件UITableViewHeaderFooterView(和自定义cell的方法几乎一样)时,出现了头部控件子控件不显示的问题. 注意和自定义cell的区别. .h文件 #imp ...

  9. access数据库select查询top时无效的解决办法

    access数据库select查询top时有时无效,原因就是在使用Order by时,且排序的条件中数据有重复的. 比如:select top 10 * from table1 order by cd ...

  10. VC运行库合集2005/2008/2010/2012/2013/2015

    VC运行库合集2005/2008/2010/2012/2013/2015,批处理一键安装(需管理员权限) 链接:http://pan.baidu.com/s/1bpLZoFt 密码:bnk8