bootstrap实现分页
bootstrap分页功能
写前端都会面临的一个问题就是分页,如果是纯js分页也是可以的,只是可能代码量比较大,所以今天写一个关于用bootstrap框架分页的例子,希望以后可以帮助到一些对这方面比较头疼的码农。
先看看渲染图
页面HTML:
需要引入bootstrap和jquery
<script src="/static/js/jquery-2.1.0.min.js" th:src="@{/js/jquery-2.1.0.min.js}"></script>
<script src="/static/bootstrap3.3.7/js/bootstrap.min.js" th:src="@{/bootstrap3.3.7/js/bootstrap.min.js}"></script>
<link rel="stylesheet" href="/static/bootstrap3.3.7/css/bootstrap.min.css" th:href="@{/bootstrap3.3.7/css/bootstrap.min.css}">
.....
<!--分页-->
<div style="display: flex;justify-content: center;">
<ul class="pagination" id="page">
</ul>
</div>
.....
分页JS:
<!--分页-->
<script th:inline="javascript">
$(function(){
//当前页码
var page = [[${page}]];
//总页码
var pageCount = [[${pageCount}]];
//如果是第一页,则禁用上一页的连接
if(page==1){
$("#page").append("<li><a href='/blog/page?page=1' style='cursor:pointer;pointer-events: none'>«</a></li>");
}else{
$("#page").append("<li><a href='/blog/page?page="+(page-1)+"'>«</a></li>");
}
//每页显示5个页码
var ym =Math.floor((page-1)/5)*5;
for(var i=1;i<6;i++){
ym = ym+i;
var url='/blog/page?page='+ym+'&limit=4';
if(ym==page){
$("#page").append("<li class='active'><a href='"+url+"'>"+ym+"</a></li>");
}else{
$("#page").append("<li><a href='"+url+"'>"+ym+"</a></li>");
}
ym =Math.floor((page-1)/5)*5;
} //如果是最后一页,则禁用下一页的连接 if(page==pageCount){
$("#page").append("<li><a href='#' style='cursor:pointer;pointer-events: none'>»</a></li>");
}else{
$("#page").append("<li><a href='/blog/page?page="+(page+1)+"'>»</a></li>");
}
})
这样就可以使用bootstrap实现一个简单的分页功能了
bootstrap实现分页的更多相关文章
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- 使用KnockoutJs+Bootstrap实现分页
[后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页 一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端 ...
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- 第二百三十九节,Bootstrap路径分页标签和徽章组件
Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 ...
- Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap表格分页(一)
最近在学习Bootstrap的分页,有一种方法用“Bootstrap-Paginator”的东西来做. 先预览一下: 为了能够局部刷新页面,我创建了一个PartialView 页面的HTML部分如下: ...
- bootstrap table分页(前后端两种方式实现)
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
随机推荐
- 【代码笔记】XML深入学习:DTD约束与DTD语法(1)
2015-12-27 文件名 student.xml <?xml version="1.0" encoding="GB2312" standalon ...
- python递归锁与信号量
递归锁 一把大锁在加一把小锁. import threading import time def run1(): print("grab the first part data") ...
- Angular js 过滤器 笔记(转自菜鸟教程)
1.uppercase,lowercase 大小写转换 {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING {{ ...
- 如何禁用 Azure 虚拟机的日期时间同步
问题描述 由于 Azure 虚拟机的特殊性,物理主机会实时同步虚拟机的时间和日期.当有特殊需求时,客户想要停止日期时间的同步,但是一些常见的关闭 NTP 服务等操作都会失败. 解决方案 Importa ...
- Azure 12 月新公布
Azure 12 月新发布:人脸识别 API 推出更新,媒体服务当前几种计量方式的调整,Azure Media Redactor 提供预览, Azure 密钥保管库开始计费, 和 Azure 支付方式 ...
- 增强for循环 java.util.ConcurrentModificationException
Java中的Iterator功能比较简单,并且只能单向移动: (1) 使用方法iterator()要求容器返回一个Iterator.第一次调用Iterator的next()方法时,它返回序列的第一个元 ...
- Facet constraits error: Spring 4.1 requires Java 1.6 or newer.
问题来源: 在高版本的myeclipse,同步低版本的myeclipse提交的项目,可能会出现配置不一致. 问题描述: spring4.1不支持jdk1.6 注:在下载项目到本地的时候,myeclip ...
- 【图文详解】Zookeeper集群搭建(CentOs6.3)
Zookeeper简介: Zookeeper是一个分布式协调服务,就是为用户的分布式应用程序提供协调服务的. A.zookeeper是为别的分布式程序服务的 B.Zookeeper本身就是一个分布式程 ...
- 玩转web之ligerui(一)---ligerGrid又一次指定url
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012116457/article/details/27109227 请珍惜小编劳动成果.该文章为小 ...
- bpexpdate – 更改映像目录库中备份的截止日期以及介质目录库中介质的截止日期nbu
1.根据bpdbjobs查找backupidbpdbjobs -jobid xxx -all_columns|grep backupid 2.查看数据保留时间[root@backup]# bpimag ...