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'>&laquo;</a></li>");
}else{
$("#page").append("<li><a href='/blog/page?page="+(page-1)+"'>&laquo;</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'>&raquo;</a></li>");
}else{
$("#page").append("<li><a href='/blog/page?page="+(page+1)+"'>&raquo;</a></li>");
}
  })
这样就可以使用bootstrap实现一个简单的分页功能了
 

bootstrap实现分页的更多相关文章

  1. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  2. 使用KnockoutJs+Bootstrap实现分页

    [后端人员耍前端系列]KnockoutJs篇:使用KnockoutJs+Bootstrap实现分页   一.引言 由于最近公司的系统需要改版,改版的新系统我打算使用KnockoutJs来制作Web前端 ...

  3. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  4. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  5. 第二百三十九节,Bootstrap路径分页标签和徽章组件

    Bootstrap路径分页标签和徽章组件 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件 ...

  6. Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

  7. Bootstrap Paginator分页插件+ajax

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub  Bootstrap分页插件属性介绍: http://www.cnblogs. ...

  8. Bootstrap表格分页(一)

    最近在学习Bootstrap的分页,有一种方法用“Bootstrap-Paginator”的东西来做. 先预览一下: 为了能够局部刷新页面,我创建了一个PartialView 页面的HTML部分如下: ...

  9. bootstrap table分页(前后端两种方式实现)

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

随机推荐

  1. caffe-windows中classification.cpp的源码阅读

    caffe-windows中classification.cpp的源码阅读 命令格式: usage: classification string(模型描述文件net.prototxt) string( ...

  2. css display:table圣杯布局

    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...

  3. PLSQL Developer中几个功能

    1,登录后默认自动选中My Objects 默认情况下,PLSQL Developer登录后,Brower里会选择All objects,如果你登录的用户是dba,要展开tables目录,正常情况都需 ...

  4. Linux下Vue项目搭建karma测试框架

    前提:vue项目已创建,node.js.npm已安装 1.全局安装karma脚手架 karma-cli  [貌似可以不安装] #npm i -g karma-cli 2.转到Vue项目目录,项目下安装 ...

  5. ubuntu或者debian安装php-gd扩展错误

    ‘./configure’ ‘–prefix=/usr/local/php’ ‘–with-config-file-path=/etc’ ‘–with-mysql=/usr/local/mysql’ ...

  6. HCNA配置手工负载分担模式链路聚合

    一.配置手工负载分担模式链路聚合 链路聚合(Link Aggregation)是将—组物理接口捆绑在一起作为一个逻辑接口来增加带宽的一种方法,又称为多接口负载均衡组(Load Sharing Grou ...

  7. Jmeter入门19 保存测试结果(或从文件读取结果)

    以聚合报告为例,其他监听器有write results to file的类似. 首先 为了避免每次保存的测试报告被覆盖,我们在testplan下添加两个参数:项目名和当前时间(毫秒级) 其次 添加聚合 ...

  8. ubuntu16.4安装最新版wine3.0

    1.主体大致过程 $ wget https://dl.winehq.org/wine/source/3.0/wine-3.0.tar.xz $ tar -xvf wine-3.0.tar.xz $ c ...

  9. VMware,win7与linux centos6.4文件互传,linux下挂载windows共享文件夹,vmware tools安装方法

    本方法是以win7,VMware9.0.1 ,centos6.4为基础实验的. 对于linux的初级使用阶段,都会Windows中使用linux虚拟机VMWare或者其它的.在Windows与linu ...

  10. Android(java)学习笔记46:反射机制

    1. 反射机制: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称 ...