[轉]Bootstrap table後端分頁（ssm版）
阿新 • • 發佈：2018-08-13
log 包含 ucc utf-8 get doctype 3.1.1 樣式 poj 
原文地址:https://www.cnblogs.com/flyins/p/6752285.html
說明
bootstrap table可以前端分頁，也可以後端sql用limit分頁。
這裏講的是後端分頁，即實用limit。性能較好，一般均用這種
源碼下載地址：https://git.oschina.net/dingshao/pagination_byjava.git
該文主要講後端分頁：
1、前端每點擊翻頁按鈕，就會向後端發出一次請求，後端只查詢當前頁數所需要的幾條數據
2、查詢也是後端，會進入服務器
源碼
html
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta charset="utf-8">
<title>圖片上傳</title>
<!-- jq -->
<script type="text/javascript" src="<%=basePath%>js/jquery-3.1.1.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="<%=basePath%>/plugs/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath%>/plugs/bootstrap/js/bootstrap.min.js"></script>
<!-- 分頁插件 -->
<link rel="stylesheet" href="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.css">
<script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="<%=basePath%>plugs/bootstrap-table/bootstrap-table-locale-all.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:100px">
<div class="row">
<!-- 搜索框 -->
<div class="col-xs-6 pull-right">
<div class="input-group">
<input type="text" class=" form-control" name="age" placeholder="請輸入年齡">
<input type="text" class=" form-control" name="name" placeholder="請輸入姓名">
<span class="input-group-btn">
<button class="btn btn-default search" type="button">Go!</button>
</span>
</div>
</div>
<!-- 表格 -->
<div class="col-xs-12">
<table class="table table-striped table-bordered table-hover" ></table>
</div>
</div>
</div>
<script type="text/javascript">
class BstpTable{
constructor(obj) {
this.obj=obj;
}
inint(searchArgs){
//---先銷毀表格 ---
this.obj.bootstrapTable(‘destroy‘);
//---初始化表格,動態從服務器加載數據---
this.obj.bootstrapTable({
//【發出請求的基礎信息】
url: ‘<%=basePath%>student/selectByFy‘,
method: ‘post‘,
contentType: "application/x-www-form-urlencoded",
//【查詢設置】
/* queryParamsType的默認值為 ‘limit‘ ,在默認情況下 傳給服務端的參數為：offset,limit,sort
設置為 ‘‘ 在這種情況下傳給服務器的參數為：pageSize,pageNumber */
queryParamsType:‘‘,
queryParams: function queryParams(params) {
var param = {
pageNumber: params.pageNumber,
pageSize: params.pageSize
};
for(var key in searchArgs){
param[key]=searchArgs[key]
}
return param;
},
//【其它設置】
locale:‘zh-CN‘,//中文支持
pagination: true,//是否開啟分頁（*）
pageNumber:1,//初始化加載第一頁，默認第一頁
pageSize: 3,//每頁的記錄行數（*）
pageList: [2,3,4],//可供選擇的每頁的行數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
showRefresh:true,//刷新按鈕
//【樣式設置】
height: 300,//table的高度
//按需求設置不同的樣式：5個取值代表5中顏色[‘active‘, ‘success‘, ‘info‘, ‘warning‘, ‘danger‘];
rowStyle: function (row, index) {
var style = "";
if (row.name=="小紅") {style=‘success‘;}
return { classes: style }
},
//【設置列】
columns: [
{field: ‘id‘,title: ‘id‘},
{field: ‘name‘,title: ‘姓名‘},
{field: ‘age‘,title: ‘年齡‘},
{field: ‘tool‘,title: ‘操作‘, align: ‘center‘,
formatter:function(value,row,index){
var element =
"<a class=‘edit‘ data-id=‘"+row.id +"‘>編輯</a> "+
"<a class=‘delet‘ data-id=‘"+row.id +"‘>刪除</a> ";
return element;
}
}
]
})
}
}
var bstpTable=new BstpTable($("table"));
bstpTable.inint({})
$(".search").click(function(){
var searchArgs={
name:$("input[name=‘name‘]").val(),
age:$("input[name=‘age‘]").val()
}
bstpTable.inint(searchArgs)
})
</script>
</body>
</html>
controller
package com.dsh.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.dsh.service.StudentService;
@Controller
@RequestMapping("student")
public class StudentController {
@Autowired
private StudentService studentService;
@RequestMapping("selectByFy")
@ResponseBody
public Map<String,Object> selectByFy(int pageSize,int pageNumber,String name,Integer age){
/*所需參數*/
Map<String, Object> param=new HashMap<String, Object>();
int a=(pageNumber-1)*pageSize;
int b=pageSize;
param.put("a", a);
param.put("b", b);
param.put("name", name);
param.put("age", age);
return studentService.selectByFy(param);
}
}
service
package com.dsh.service.imp;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.dsh.mapper.StudentCustomMapper;
import com.dsh.pojo.Student;
import com.dsh.service.StudentService;
@Service
public class StudentServiceImp implements StudentService {
@Autowired
private StudentCustomMapper studentDao;
@Override
public Map<String,Object> selectByFy(Map<String, Object> param) {
//bootstrap-table要求服務器返回的json須包含：totlal，rows
Map<String,Object> result = new HashMap<String,Object>();
int total=studentDao.selectByFy(null).size();
List<Student> rows=studentDao.selectByFy(param);
result.put("total",total);
result.put("rows",rows);
return result;
}
}
mapper.xml（即dao）
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.dsh.mapper.StudentCustomMapper" >
<select id="selectByFy" resultType="com.dsh.pojo.Student" parameterType="Map">
SELECT *
FROM student
<if test="a!=null">
<where>
<if test="name!=null and name!=‘‘"> name=#{name}</if>
<if test="age!=null and age!=‘‘">AND age=#{age}</if>
</where>
LIMIT #{a},#{b}
</if>
</select>
</mapper>
[轉]Bootstrap table後端分頁（ssm版）