<!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. JS正则表达式大全(整理详细且实用)

    JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助!! 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释, ...

  2. Python - 异步IO\数据库\队列\缓存

    协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程,协程一定是在单线程运行的. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和 ...

  3. IIS：日志代码分析

    如何看IIS日志代码,打开IIS日志后,你会看见里面有很多访问记录.baiduspider,Googlebot等就是蜘蛛了.蜘蛛爬过后都会留下记录的,状态代码列在下面: 100 - 表示已收到请求的一 ...

  4. 使用WebView加载assets下的html文件

    有时候,我们需要将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示出来,比如给页面一个默认的显示,这样子看起来效果要好很多.代码如下: pri ...

  5. Windows下使用scapy+python2.7实现对pcap文件的读写操作

    scapy在linux环境中对pcap文件进行操作非常方便,但在windows下,特别是在python2.7环境下却会碰到各种各样的依赖包无法使用的问题,最明显的可能就属dnet和pcap的pytho ...

  6. 使用它tshark分析pcap的例子以及scapy下载地址

    转一篇cisco工作人员使用tshark分析pcap的文章,以及scapy的下载地址 http://blogs.cisco.com/security/finding-a-needle-in-a-pca ...

  7. c# Wndproc的使用方法

    protected override void WndProc(ref Message m) { const int WM_SYSCOMMAND = 0x0112; const int SC_CLOS ...

  8. RMAN_学习笔记5_RMAN Catalog Script恢复目录脚本

    2014-12-24 Created By BaoXinjian

  9. phonegap(cordova)环境配置

    首先要配置好  java jdk 和 java jre 环境 配置之后 控制台  javac -version 查看是否配置成功 然后配置 Android sdk 配置之后 控制台 输入 adb 查看 ...

  10. [ActionScript 3.0] AS3.0 让一个视频无缝循环播放的一个偏方

    一个视频要循环播放,通常的办法都是播放完后再重新播放,但是不可避免的播放结束和重新开始播放这个时间点上会有停顿,如何解决这个问题,说个偏方吧! package com.views { import f ...