bootstrap Table是一个基于ajax异步获取数据的插件 可以实现查询分页等多种功能
本文博主将从零开始，一步一步的告诉大家如何在前端用bootstrap Table插件
官方下载地址：https://bootstrap-table.wenzhixin.net.cn/docs/getting-started/download/
首先在jsp页面添加对插件的引用
<!-- 引入bootstrap-table样式 -->
<link href="bootstrap-table/css/bootstrap-table.min.css"
rel="stylesheet">
<!-- jquery -->
<script src="bootstrap-table/js/jquery.min.js"></script>
<script src="bootstrap-table/js/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="bootstrap-table/js/bootstrap-table-zh-CN.min.js"></script>
然后再jsp页面添加表格要显示的位置以及查询条件
<div id="query">
<span>用户姓名:</span> <input type="text" id="name" name="name"
autocomplete="off" placeholder="请输入用户姓名">
<button id="queryBtn" onclick="query()">查询</button>
</div>
<table id="table" data-toolbar="#toolbar"></table>
然后编写js
<script type="text/javascript">
//有些地方添加中文语言包还是会出现乱码情况 所以在这里直接编辑要显示的文本内容
$(function () {
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中，请稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '没有找到匹配的记录';
},
formatPaginationSwitch: function () {
return '隐藏/显示分页';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切换';
},
formatColumns: function () {
return '列';
},
formatExport: function () {
return '导出数据';
},
formatClearFilters: function () {
return '清空过滤';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
//1.初始化Table
var oTable = new initTable();
});
function query(){
//刷新表格
$('#table').bootstrapTable('refresh');
}
/*
实现回车键 触发查询按钮
*/
$("body").keydown(function() {
if (event.keyCode == "13") {//keyCode=13是回车键
$('#queryBtn').click();
}
});
//初始化bootstrap-table的内容
function initTable () {
//记录页面bootstrap-table全局变量$table，方便应用
$table = $('#table').bootstrapTable({
url: "url", //请求后台的URL（*）
method: 'POST', //请求方式（*）
contentType: "application/x-www-form-urlencoded",//post请求的话就加上这个句话
//toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams : initTable.queryParams,// 传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
search: false, //是否显示表格搜索
strictSearch: true,
//buttonsAlign:"left", //按钮显示的位置
showRefresh: true, //是否显示刷新按钮
showToggle: true, //是否显示详细视图和列表视图的切换按钮
//showColumns: true, //是否显示所有的列（选择显示的列）
//minimumCountColumns: 2, //最少允许的列数
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "id", //每一行的唯一标识，一般为主键列
//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
//设置为limit可以获取limit, offset, search, sort, order
"queryParamsType":'limit',
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
var temp = {
rows: params.limit, // 每页显示数量
page: (params.offset / params.limit) + 1, //页码
product_id:$("#product_id").val(),
name: $("#name").val()//传递查询的参数
//sort: params.sort, //排序列名
//sortOrder: params.order //排位命令（desc，asc）
};
return temp;
},
columns: [{
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
},{
field: 'name', //对应后台传递的属性名
title: '姓名',//表格要显示的第一行文本
align: 'center',//文本居中
valign: 'middle'
},{
field: 'product_id',
title: '产品名称',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {//根据传递的参数来进行更改
switch (value) {
case 1:
return "产品1";
break;
case 2:
return "产品2";
break;
default:return "产品异常";
}
}
}
]
});
};
</script>
前端页面编写完毕，下面编写后台java传递数据的格式
首先运用表格分页工具类 对传递的数据进行封装
/**
* 表格分页工具类
* @author Administrator
*
*/
public class PageTable {
private Integer currentPage;//当前页
private int limit;//每页显示记录条数
private int totalPage;//总页数
private List<?> dataList;//每页显示的数据
private int offset;//开始数据
public Integer getCurrentPage() {
return currentPage;
}
public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public List<?> getDataList() {
return dataList;
}
public void setDataList(List<?> dataList) {
this.dataList = dataList;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
this.limit = limit;
}
public int getOffset() {
return offset;
}
public void setOffset(int offset) {
this.offset = offset;
}
}
然后再controller类 编写接口对应表格请求的地址
package com.gm.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.gm.util.PageTable;
import com.google.gson.Gson;
/**
* bootstrap table表格
*
* @author Administrator
*
*/
@Controller
public class TestController {
@RequestMapping("url")
public void test(HttpServletRequest request, HttpServletResponse response) throws IOException {
// 设置从request中取得的值或从数据库中取出的值的编码格式
request.setCharacterEncoding("UTF-8");
// 设置从response中取得的值或从数据库中取出的值的编码格式
response.setContentType("text/html;charset=utf-8");
// 获取bootstrap table 的rows参数
String limit = request.getParameter("rows");
// 获取bootstrap table 的page参数
String pageSize = request.getParameter("page");
// 获取查询条件的name
String name = request.getParameter("name");
// sql语句从数据库查询数据
List list = new ArrayList<>();// 从数据库获取的数据 存放到list中
PageTable page = new PageTable();
// 设置第几页
page.setCurrentPage(Integer.parseInt(pageSize));
// 刚开始的页面为第一页
if (page.getCurrentPage() == null) {
page.setCurrentPage(1);
} else {
page.setCurrentPage(page.getCurrentPage());
}
// 设置每页数据为十条
page.setLimit(Integer.parseInt(limit));
// 每页的开始数
page.setOffset((page.getCurrentPage() - 1) * page.getLimit());
// list的大小
int count = list.size();
// 设置总页数
page.setTotalPage(count % 10 == 0 ? count / 10 : count / 10 + 1);
// 对list进行截取
page.setDataList(list.subList(page.getOffset(),
count - page.getOffset() > page.getLimit() ? page.getOffset() + page.getLimit() : count));
list = (List) page.getDataList();
Map<String, Object> map = new HashMap<>();
if (list != null) {
map.put("total", count);
map.put("rows", list);
}
Gson gson = new Gson();
String json = gson.toJson(map);
PrintWriter out = null;
out = response.getWriter();
out.print(json);
out.close();
}
}
好了代码编写完成!吃饭了。