css和js的引入

bootstrap中文网的链接: link https://www.bootcss.com/
bootstrap-table中文网的链接: link https://www.bootstrap-table.com.cn/index.html
css引入

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
//这是网页模板的引入 先引入bootstrap_css在引入bootstrap-table_css

css一般在< head>< /head>和< body></ body>之间引入

js引入

<script type="text/javascript" src="../../font/js/jquery-3.6.0.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.21.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
//jquery一定要在bootstrap和bootstrap-table之前引入，因为他俩基于jquery
//bootstrap-table-zh-CN 中文解析
//这里只有jquery的引入不是网页版

js一般在< body></ body>之后引入，一般放在页面最后

bootstrap-table模板(template)-返回表格

 $(function(){$('#table1').bootstrapTable({url: '/Master/getCheck', //后台接口method: 'post',contentType:"application/x-www-form-urlencoded",//method为post时必须加上这个,否则接收不到参数 后台返回Map格式或者json格式都可以用application/x-www-form-urlencoded dataType: 'json',//queryParams这个方法可以和后台交互queryParams:function queryParams(params) {   //设置查询参数var param = {pageSize: params.limit,   //每页多少条数据pageNumber: params.offset, //从第几条数据开始phone : $.trim($("#phone").val()),//可以返回后台name : $.trim($("#name").val()),};//console.log("pageSize="+params.limit+"pageNumber="+params.offset);return param;},/* onSearch:function (text){alert(text);},*//*  customSearch:function(){alert("customSearch");},*/height: 560,toolbar: '#toolbar',                //工具按钮用哪个容器striped: true,                      //是否显示行间隔色pagination: true,                   //是否显示分页（*）maintainSelected: true,             //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项sidePagination: "server",          //分页方式：client客户端分页，server服务端分页（*）pageNumber:1,                       //初始化加载第一页，默认第一页pageSize: 5,                       //每页的记录行数（*）pageList: [2,5, 10, 25, 50, 100],        //可供选择的每页的行数（*）search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大strictSearch: true,                //设置为 true启用 全匹配搜索，否则为模糊搜索showRefresh: true,                  //是否显示刷新按钮minimumCountColumns: 2,             //最少允许的列数clickToSelect: true,                //是否启用点击选中行uniqueId: "id",                 //每一行的唯一标识，一般为主键列\sortStable: true,columns: [{checkbox: true},{field: 'id', title: '工号',align: 'center'},{field: 'name', title: '姓名',align: 'center'},{field: 'sex', title: '性别',align: 'center'},{field: 'age', title: '年龄',align: 'center'},{field: 'phone', title: '手机号',align: 'center'},{field: 'account', title: '账号',align: 'center'},{field: 'address', title: '位置',align: 'center'},{field: 'status',title: '状态',/*** formatter 列函数 表示对当前列的数据进行格式化的操作* @param value 表示当前单元格中的值* @param row 表示当前行* @param index 表示当前行的下表*/formatter:function (value,row,index) {console.log(value);if(value==1){status="空闲";}else if(value==0){status="请假";}else if(value==2){status="休息";}return status;}},{field: 'operator',title: '操作',align: 'center',sortable: true,width:'10%',formatter: function (value, row, index) {return '<a href="#" data-target="#updateForm"data-toggle="modal" title="修改">' +'<i class="glyphicon glyphicon-pencil"></i>' +'</a>'+'<a href="javascript:void(0)" title="删除">' +'<i class="glyphicon glyphicon-trash text-danger"></i>' +'</a>';},events: {'click a[title=删除]': function (e, value, row, index) {//可以设置'删除的'的单击事件},'click a[title=修改]': function (e, value, row, index) {//可以设置'修改'的单击事件},}}]});})

后端

controller

 @RequestMapping("/getPageResultOrders")@ResponseBodypublic Map<String,Object> getPageResultOrders(Integer pageNumber, Integer pageSize, Orders c, HttpServletRequest req, HttpServletResponse resp) throws UnsupportedEncodingException, NoSuchAlgorithmException {pageNumber= (pageNumber/pageSize)+1;PageResult ordersCheck = ordersService.getPageResultOrders(pageNumber,pageSize,c);/*c.setPhone(req.getParameter("phone"));c.setName(req.getParameter("name"));*///System.out.println(c.getPhone()+" "+c.getName());List<Orders> list = ordersCheck.getRows();for (Orders m:list ) {String addresss = LngAndLatUtil.getLngAndLat(m.getLng(), m.getLat());m.setComAddress(addresss);System.out.println( m.getComAddress());}Map<String, Object> map = new HashMap<>();map.put("total",ordersCheck.getTotal());map.put("rows",ordersCheck.getRows());return map;}

分页 Service

public PageResult getPageResultOrders(int pageNum, int pageSize, Orders o) {PageHelper.startPage(pageNum,pageSize);List<Orders> list = dao.getOrdersAll(o);Page page =(Page) list;PageResult pageResult = new PageResult(page.getPageNum(), page.getTotal(), page.getResult(), page.getPages());return pageResult;}

分页插件 pom.xml中的配置

     <!--分页插件  --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.2</version></dependency>

分页中sqlConfigMap.xml的配置

     <plugins><!-- &lt;!&ndash; 5.0之前配置方式com.github.pagehelper 为 PageHelper 类所在包名<plugin interceptor="com.github.pagehelper.PageHelper">设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库<property name="dialect" value="mysql"/></plugin>&ndash;&gt;&lt;!&ndash; 5.0之后配置方式 &ndash;&gt;--><plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin></plugins><!--在这里说一下mybits中sql日志的打印--><settings><!-- 打印sql日志 --><setting name="logImpl" value="STDOUT_LOGGING" /></settings>

bootstrap-table模板(template)-返回表格-分页模板-分页插件相关推荐

C++中函数模板的返回值是模板类型参数的调用方法
1 函数模板模板定义以关键字template开始,后接模板形参表,模板形参表是用尖括号扩住的一个或多个模板形参的列表,形参之间以逗号分隔.关于函数模板的详细介绍,请参考<C++中模板函数及模板 ...
BootStrap Table和Mybatis Plus实现服务端分页
一.后台java代码(Mybatis Plus分页) (1)Mybatis Plus分页的配置,在mybatis的xml文件中增加如下配置(Mybatis Plus官方文档:http://baomid ...
html表ge模板_html css表格样式模板
在html的css样式表中,为表格定义CSS样式#ta,tr,td,th{ } ta是我自己定义的名字,怎么后边可以直接跟tr,td,th 如果你是要给 "ta表格"设置样式. # ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
bootstrap table排序php,BootStrap+Table排序分页序号
这次给大家带来BootStrap+Table排序分页序号,BootStrap+Table排序分页序号的注意事项有哪些,下面就是实战案例,一起来看一下. 前言在使用bootstrap table的时候难 ...
C++ 模板template
模板template 模板是对具有相同特性的函数或类的再抽象,模板是一种参数多态性的工具,可以为逻辑功能相同而类型不同的程序提供一种代码共享的机制. 一个模板并非一个实实在在的函数或类,仅仅是一个函数 ...
【JS组件系列】——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列--表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
设计模式学习笔记——模板(Template)模式
设计模式学习笔记--模板(Template)模式 @(设计模式)[设计模式, 模板模式, template, 模板方法] 设计模式学习笔记模板Template模式基本介绍模板案例类图实现代码 ...

bootstrap-table模板(template)-返回表格-分页模板-分页插件

目录