spring boot 系列学习记录：http://www.cnblogs.com/jinxiaohang/p/8111057.html

码云源码地址：https://gitee.com/jinxiaohang/springboot

　　本篇重点介绍bootstrap-table，一款很棒的前端框架，需要bootstrap支持，可以用于数据的展示，后端没有实现数据分页，只是前端将所接收的数据进行分页。

　　本次练习在之前整合Spring Data JPA基础上进行。

一、下载组件

下载bootstrap-table：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

下载bootstrap：https://v3.bootcss.com/

下载jqurey：http://jquery.com/

　　下载源码后解压出来，在demo中导入我们想要的代码。

如下图所示：

　　jquery的一个js文件、

　　bootstrap的一个js文件、一个css文件、一个字体包

　　bootstrap-table的两个js文件、一个css文件

二、bootstrap-table使用

　　在resources下的static中，新建一个html文件添加以下内容：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>

        开始使用 Bootstrap Table

    </title>

    <link rel="stylesheet" href="css/bootstrap.min.css"><!--需要添加fonts图标显示才会好-->

    <link rel="stylesheet" href="css/bootstrap-table.min.css">

    <script src="js/jquery-3.2.1.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script src="js/bootstrap-table.min.js"></script>

    <script src="js/bootstrap-table-zh-CN.min.js"></script>

</head>

<body>

<div class="container">

    <div id="toolbar" class="btn-group">

        <button id="btn_add" type="button" class="btn btn-default">

            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增

        </button>

        <button id="btn_edit" type="button" class="btn btn-default">

            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改

        </button>

        <button id="btn_delete" type="button" class="btn btn-default">

            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除

        </button>

    </div>

    <table id="table"></table>

</div>

</body>

<script>

    $('#table').bootstrapTable({

        url: '/api/user/list',//获取所有数据的接口

        method: 'get',                      //请求方式（*）

        toolbar: '#toolbar',                //工具按钮用哪个容器

        pagination: true,                   //是否显示分页（*）

        striped: true,                      //是否显示行间隔色

        //sortOrder: "asc",                   //排序方式

        uniqueId: "userId",                 //每一行的唯一标识，一般为主键列

        pageSize: 10,                       //每页的记录行数（*）

        pageList: [5,10,20],//可供选择的每页的行数（*）

        showRefresh: true,                  //是否显示刷新按钮

        showToggle:true,                    //是否显示详细视图和列表视图的切换按钮

        columns: [{

            field: 'userId',//与返回数据对象属性一致

            title: 'Item userId'//表头显示

        }, {

            field: 'userName',

            title: 'Item userName'

        }, {

            field: 'password',

            title: 'Item password'

        }, ]

    });

</script>

　　 如果实体不同，只需修改url、和columns。

三、运行效果

　　接口数据格式展示：

　　运行效果展示：

每页5条数据

每页10条数据

每页20条数据

　　显示条数可根据两项修改。

pageSize: 10,           //每页的记录行数（*）

pageList: [5,10,20],　　//可供选择的每页的行数（*）

四、总结

　　没有实现真正意义上的分页，不能缓解后端查询和数据传输的压力，只是bootstrap-table将数据很好展现出来。

　　bootstrap-table还有更多使用方式参考：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/

第17章—前端分页（Bootstrap-Table）的更多相关文章

  1. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  2. 第十一章 前端开发-bootstrap

    11.5.0 bootstrap 11.5.1 bootstrap的介绍和响应式 http://book.luffycity.com/python-book/95-bootstrap/951-boot ...

  3. bootstrap table 前后端分页（超级简单）

    前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...

  4. 新的表格展示利器 Bootstrap Table Ⅱ

        上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍BootStrap Table的扩展功能,当行表格数据修改. 1.B ...

  5. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  6. bootstrap Table从零开始

      本文博主将从零开始,一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格 首先,要下载bootstrap Table插件所必须的js,地址:https://github.c ...

  7. bootstrap Table的 一些小操作

    function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) scroll ...

  8. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  9. Bootstrap table前端分页（ssm版）

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...

随机推荐

  1. 点滴积累【JS】---JQuery实现条形统计图，适用于选择题等统计

    效果: 思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据 代码: <%@ Page Language="C#" AutoEventWireup=&qu ...

  2. C语言中的传值调用

    在c语言中每个变量都有两个属性一个是值,一个是址. 比方: int a = 2; 变量a的值是2,变量a的地址,能够用&取地址操作符获取,即&a. 因此以C语言的函数传递中具备两种方式 ...

  3. 正则过滤html的标签

    $('#Text').find('br').remove();//移除br标签 let content = $('#smsText').html().replace(/ /g, ' ').replac ...

  4. QT .pro文件 LIBS用法详解

    在程序中需要使用到团队其它成员开发的静态库和动态库,起初是知道使用LIBS变量在在.pro文件中指定需要包含的库,但是实际使用的时候却遇到很大麻烦,但其实确实是因为自己看官方文档不太用心造成的. 下面 ...

  5. mybatis expected at least 1 bean which qualifies as autowire candidate for this dependency

    错误原因:没有引入相应mapper接口,导致spring没有找到依赖 解决方法一:使用注解的方法: 首先在spring配置文件中添加 <bean class="org.mybatis. ...

  6. iOS 新手引导页图片适配及其尺寸大全

    早期新手引导页只需要几张图片就可以解决了,随着屏幕尺寸的的越来越多,新手引导页的尺寸适配起来越来越麻烦,否则就会出现尺寸不匹配,图片被拉伸的情况 目前应该是有2种方法来解决这个问题 方法1: 根据每款 ...

  7. OceanBase分布式事务以及两阶段提交实现具体设计

    眼下OceanBase中还存在updaeserver单点,下一步的开发任务是使得OB支持多点写入,支持多个UPS(及updateserver). 当中难点是怎样设计两阶段提交的失败恢复以及多机的快照读 ...

  8. Create a new Docker Machine with the Hyper-V driver

    docker-machine就是docker工具集中提供的用来管理容器化主机的工具,用来管理运行在不同环境的主机,包括:本地虚拟机,远程虚拟机,公有云中的虚拟机都可以通过一个命令统一进行管理. 01. ...

  9. React从入门到精通系列之(14)refs和DOM元素

    react.js 3.7k 次阅读  ·  读完需要 8 分钟 8 十四.refs和DOM元素 在典型的React数据流中,props是父组件与其子组件交互的唯一方式. 要修改子组件,需要使用一个新的 ...

  10. HIBERNATE与 MYBATIS的对比，在这里做一下总结

    我是一名java开发人员,hibernate以及mybatis都有过学习,在java面试中也被提及问道过,在项目实践中也应用过,现在对hibernate和mybatis做一下对比,便于大家更好的理解和 ...