一： 前端代碼html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>歡迎登陸</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="input-group" style="float:right;">
<input type="text" id="userId" style="width:200px;height:40px;" >
<span>
<button type="button" id="eventquery" class="btn btn-success" style="width:80px;">查找</button>
</span>
</div>
<table id="table_server" ></table>
</body>
</html>
二：table插件初始化js代碼
//文檔加載事件
$(document).ready(function() {
// 初始化表格
initTable();
});
function initTable() {
var t = $("#table_server").bootstrapTable({
url: 'http://localhost:8080/findAll',
method: 'get',
dataType: "json",
striped: true,//設定為 true 會有隔行變色效果
undefinedText: "空",//當資料為 undefined 時顯示的字元
pagination: true, //分頁
// paginationLoop:true,//設定為 true 啟用分頁條無限循環的功能。
// showToggle: "true",//是否顯示 切換試圖（table/card）按鈕
// showColumns: "true",//是否顯示 内容列下拉框
pageNumber: 1,//如果設定了分頁，首頁頁碼
// showPaginationSwitch:true,//是否顯示 資料條數選擇框
pageSize: 5,//如果設定了分頁，頁面資料條數
pageList: [5, 10, 20, 40], //如果設定了分頁，設定可供選擇的頁面資料條數。設定為All 則顯示所有記錄。
paginationPreText: '‹',//指定分頁條中上一頁按鈕的圖示或文字,這裡是<
paginationNextText: '›',//指定分頁條中下一頁按鈕的圖示或文字,這裡是>
// singleSelect: false,//設定True 将禁止多選
search: false, //顯示搜尋框
data_local: "zh-US",//表格漢化
sidePagination: "server", //服務端處理分頁
queryParams: queryParams,
//将傳回的值指派給table插件的屬性
responseHandler:function(res){
console.info(res)
return{
"total":res.total,
"rows": res.records,
"page":res.current
}
},
idField: "id",//指定主鍵列
columns: [
{
title: '#',//表的列名
field: 'id',//json資料中rows數組中的屬性名
align: 'center'//水準居中
},
{
title: '産品編号',
field: 'productId',
align: 'center'
},
{
title: '購買數量',
field: 'buyNum',
align: 'center'
},
{
title: '價格',
field: 'money',
align: 'center'
},
{
title: '收貨人資訊',
field: 'receiverinfo',//可以直接取到屬性裡面的屬性，贊
align: 'center'
},
{
title: '支付狀态',
field: 'payState',
align: 'center',
},
{
title: '訂單時間',
field: 'orderTime',//可以直接取到屬性裡面的屬性，贊
align: 'center'
},
{
title: '使用者ID',
field: 'userId',
align: 'center',
},
{
title: '操作',
align: 'center',
formatter: function (value, records, index) {//自定義顯示可以寫标簽哦~
// <a href="#" target="_blank" rel="external nofollow" @click="deleteItem(orderInfo.id)" >登出</a>
return '<a href=javascript:deletebyid(' + records.id + ')>删除</a> ';
}
}
]
});
}
//分頁查詢參數，是以鍵值對的形式設定的
function queryParams(params) {
return {
userId: $('#userId').val(), // 請求時向服務端傳遞的參數
pageNum: params.offset, // SQL語句偏移量
pageSize: params.limit, // 每頁顯示數量
}
}
// 搜尋按鈕觸發事件
$(function() {
$("#eventquery").click(function() {
$('#table_server').bootstrapTable(('refresh')); // 很重要的一步，重新整理url！
});
});
//點選删除按鈕觸發的事件
function deletebyid(id){
$.ajax({
"url":"http://localhost:8080/delete?id="+id,
"async" : true,
"type" : "GET",
"success":function (data) {
console.log(data)
alert("删除成功")
window.location.reload();
location
},
"error":function (res) {
console.log(res);
}
});
}
三 後端采用springboot+mybatisplus
1.建立controller，service，mapper以及實體類，因為采用的是mybatisplus是以和普通的采用mybatis建立的工程會有所差異，可自行百度springboot內建mybatisplus
2.springboot加載mybatisplus的分頁插件
@MapperScan("cn.sanjin.springboot.mapper")
@Configuration
public class MybatisPlusConfig {
/**
* 分頁插件
*/
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
paginationInterceptor.setDialectType("mysql");
return paginationInterceptor;
}
}
3.分頁的邏輯實作
因為采用的是mybatisplus的分頁插件是以背景邏輯實作非常友善簡單
@Controller
public class PageController {
@Autowired
private OrderInfoMapper orderInfoMapper;
@RequestMapping("/findAll")
@ResponseBody
public Object findAll(Integer pageNum,Integer pageSize,String userId){
//pageNum是查詢第幾頁，pageSize是每頁的大小，userId是查詢條件
Integer pageNumber = (pageNum + pageSize) / pageSize;
Page<OrderInfo> page = new Page<>(pageNumber, pageSize);
if (userId.isEmpty()) {//如果查詢條件為空則進行全表查詢
IPage<OrderInfo> emps = orderInfoMapper.selectPage(page, null);
return emps;
} else {//按查詢條件進行查詢，queryWrapper是進行條件封裝的
IPage<OrderInfo> emps = orderInfoMapper.selectPage(page,
new QueryWrapper<OrderInfo>().eq("userId", userId));
return emps;
}
@RequestMapping("/delete")
@ResponseBody
public Integer deleteById(Integer id) {
// System.out.println(orderinfo.getId());
Integer result =orderInfoMapper.deleteById(id);
System.out.println(result);
return result;
}
}
注：以上借鑒了網上很多文章非常感謝他們，代碼隻是demo,僅供學習參考，第一次寫部落格，歡迎大家多多指教！！！
![jdbc增删改查_Springboot+MybatisPlus高效實作增删改查一、引入Mybatis-Plus依賴二、代碼生成器三、配置Mybatis-Plus四、CURD示例五、分頁六、擴充功能總結一下[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)