Bootstrap分页功能

基于Bootsrap增加跳转页高亮功能

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>var previousObj = null;$(document).ready(function(){var pageMax = 10;$("#pageIndex").append("<li οnclick=\"jumpToPage(this, -1)\"><a>&laquo;</a><li>");for(var i=1; i<pageMax+1; i++) {if(1==i) {previousObj = $("#pageIndex").append("<li id='firstActive' οnclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>");}else {$("#pageIndex").append("<li οnclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>");}}$("#pageIndex").append("<li οnclick=\"jumpToPage(this, 101)\"><a>&raquo;</a><li>");previousObj = $("#firstActive");$(previousObj).addClass("active");});function requestBlogs(start, end) {console.log("AJAX request");}function jumpToPage(obj, page) {console.log("Jump to page: " + page);$(previousObj).removeClass("active");$(obj).addClass("active");previousObj = obj;requestBlogs();}</script></head><body><ul id="pageIndex" class="pagination"></ul></body>
</html>

演示结果：

转载于:https://www.cnblogs.com/folkzy/p/7389156.html

Bootstrap分页功能相关推荐

Java Web -【分页功能】详解
分页简介分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示. 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割. 当我们不使用分页功能的时候,会面 ...
bootstrap 分页_这五款超好用的Bootstrap扩展，让你的Web开发事半功倍
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包.它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框 ...
bootstraptable控制分页_bootstrap-table后端分页功能完整实例
本文实例讲述了bootstrap-table后端分页功能.分享给大家供大家参考,具体如下: 使用bootstrap-table实现后台分页插件资源点击此处. 引用以下css 引用以下js html ...
使用Spring数据和Thymeleaf实现Bootstrap分页
Twitter Bootstrap具有非常好的分页UI ,在这里我将向您展示如何使用Spring Data Web分页功能和Thymeleaf条件评估功能来实现它. 引导程序中的标准分页受Rdio启 ...
Bootstrap分页
前面的话分页导航几乎在每个网站都可见,好的分页能给用户带来好的用户体验.本文将详细介绍Bootstrap分页概述在Bootstrap框架中提供了两种分页导航: ☑ 带页码的分页导航 ...
[Beego] [bootstrap-paginator]实现分页功能
说明在开发中分页功能几乎是必不可少的一项功能,使用beego框架开发时,就遇到了分页功能的需求.可能是之前版本并不支持,我发现有很多自己实现的分页功能的封装,在阅读了官方源码时,我发现了分页功能的封 ...
Bootstrap 分页导航
分页导航当列表内容较多时,分页显示可以降低带宽使用,提高访问速度.分页导航可以为网站或应用提供带有分页功能的导航. Bootstrap提供了两种类型的分页导航组件,一种是带有多个页码的分页组件(pa ...
django高级应用（分页功能）
django高级应用(分页功能) 1.原生分页应用前端html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 < ...
（首页上一页下一页尾页 + 下拉框跳转）分页功能
说在前头(本人用的是bootstrap +jQuery 和 struts2 + MVC)不影响分页功能制作一个分页功能: 效果如下: 由上图可知,此功能只适合页数不是特别多的情况下,页数多的时候, ...

Bootstrap分页功能

Bootstrap分页功能相关推荐

最新文章

热门文章