java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
總覽：
一. GridManager.js表格插件
直接上插件API:鏈接地址
感覺該插件簡單好用，插件作者也是有問必答，nice
二. 添加依賴
后端： pom文件添加：
1.7.0.RELEASE
org.springframework.data
spring-data-commons
${springframework.data}
5.1.1
com.github.pagehelper
pagehelper
${pagehelper.version}
springMVC配置文件中添加：
mybatis配置文件添加：
helperDialect=mysql
前端
三. 具體實現(xiàn)
頁面容器
產(chǎn)品名稱:
請選擇品牌:
上下架:
下架
上架
搜索
重置
1.填充品牌下拉框
頁面引入品牌js腳本
brand-select.js
$(function(){
$.ajax({
url:"../brand/selectPageByQueryAjax",//請求的url地址
dataType:"json",//返回的格式為json
async:true,//請求是否異步，默認(rèn)true異步，這是ajax的特性
data:{},//參數(shù)值
type:"POST",//請求的方式
beforeSend:function(){},//請求前的處理
success:function(data){
var brands = data.dataObject;
$("#brandId").find("option").remove();//防止重復(fù)追加
$("#brandId").append("請選擇品牌");
$.each(brands, function(i, item) {
$("#brandId").append(""+item.name+"");
});
},//請求成功的處理
complete:function(){},//請求完成的處理
error:function(){
alert("error...");
}//請求出錯的處理
});
});
查詢品牌后端 較為簡單，只貼主要代碼
@ResponseBody
@RequestMapping(value = "selectPageByQueryAjax")
public JsonResult toEditBrand(){
JsonResult result = new JsonResult<>();
List brands = brandService.selectPageByQueryAjax();
result.setDataObject(brands);
return result;
}
2.分頁條件查詢產(chǎn)品
頁面引入該JS腳本
js內(nèi)容如下:
var table = document.querySelector('table')
var TGM = table.GM({
supportDrag: false//是否支持拖拽功能
,supportRemind: true//是否支持提示信息功能
,gridManagerName: 'test'//表格grid-manager所對應(yīng)的值[可在html中配置]
,isCombSorting: true //是否使用組合排序功能
,height: 'auto'//配置表格區(qū)域的高度，需要帶單位.如 '100px' 或 '50%'
,width:'1040px'
,supportAjaxPage:true//指定列表是否支持分頁
,supportSorting: true//配置是否支持排序功能, 非必填項，默認(rèn)為 false。
,disableCache: false//用于配置是否禁用用戶記憶功能, 非必填項，默認(rèn)為false
,ajax_url: '../goods/goodsPageListByQuery' //請求url
,ajax_type: 'POST'//ajax請求類型['GET', 'POST']默認(rèn)GET
,query: {
"isShow":false,//后臺傳參,默認(rèn)下架
}//配置接口請求參數(shù)，可用于搜索條件傳遞;注意事項:如果是對已實例化表格增加請求參數(shù)，請使用.setQuery()方法。
,dataKey: 'list' // 數(shù)據(jù)本身返回為data, 把數(shù)據(jù)名模擬為list, 再通responseHandler去更改
,textAlign: 'center'//在v2.3.15將棄用,請使用columnData 中的 align進(jìn)行配置
,totalsKey:'totals' //數(shù)據(jù)總條數(shù)
,sizeData:[5,10,20] //配置表格每頁顯示條數(shù)選擇項，只允許正整數(shù)。[10,20,30,50,100]默認(rèn)
,pageSize:5 //配置初始進(jìn)入時每頁的顯示條數(shù)，需要與sizeData中的值匹配。
// 可以通過該方法修改全部的請求參數(shù)
,requestHandler: function(request){
request.newParams = '這個參數(shù)是通過 requestHandler 函數(shù)新增的';
}
// 可以通過該方法修改返回的數(shù)據(jù)
,responseHandler: function(response){
response.list = response.data;
}
//表格列配置參數(shù)，數(shù)組類型。單個數(shù)組元素為對象類型，每一個元素對應(yīng)一個表格列。
//通過該參數(shù)，可以對列進(jìn)行配置。
,columnData: [{
key: 'id',// 列的唯一索引。字符串類型，必設(shè)項
remind: 'the id',// 列的表頭提醒內(nèi)容,字符串類型，非必設(shè)項
// align: 'center',
text: '產(chǎn)品ID'//列表頭顯示名稱
},{
key: 'name',
remind: 'the name',
text: '產(chǎn)品名稱'
},{
key: 'imgUrl',
remind: 'the imgUrl',
text: '產(chǎn)品圖片',
template: function(imgUrl, rowObject){
return '';
}
},{
key: 'isNew',
remind: 'the isNew',
text: '是否新品',
template: function(isNew, rowObject){
return isNew === 1 ? '是' : '否';
}
},{
key: 'isHot',
remind: 'the isHot',
text: '是否熱賣',
template: function(isNew, rowObject){
return isNew === 1 ? '是' : '否';
}
},{
key: 'createTime',
remind: 'the createTime',
text: '創(chuàng)建時間',
template: function(lastDate, rowObject){
return new Date(lastDate).format('YYYY-MM-DD HH:mm:ss');
}
},{
key: 'isShow',
remind: 'the isShow',
text: '上下架',
template: function(isNew, rowObject){
return isNew === 1 ? '上架' : '下架';
}
},{
key: 'action',
remind: 'the action',
width: '10%',
text: '操作',
template: function(action, rowObject){
return '刪除'
+' 編輯';
}
}
]
// 分頁前事件
,pagingBefore: function(query){
console.log('pagingBefore', query);
}
// 分頁后事件
,pagingAfter: function(data){
console.log('pagingAfter', data);
}
}, function(query){
// 渲染完成后的回調(diào)函數(shù)
console.log('渲染完成后的回調(diào)函數(shù):', query);
});
//日期格式化,不是插件的代碼,只用于處理時間格式化
Date.prototype.format = function(fmt){
var o = {
"M+": this.getMonth() + 1, //月份
"D+": this.getDate(), //日
"d+": this.getDate(), //日
"H+": this.getHours(), //小時
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/([Y,y]+)/.test(fmt)){
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o){
if(new RegExp("(" + k + ")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
};
// 刪除功能
function delectRowData(node){
// 獲取到當(dāng)前的tr node
var tr = node.parentNode.parentNode;
// 獲取到當(dāng)前渲染tr 所使用的數(shù)據(jù)
var rowData = document.querySelector('table').GM('getRowData', tr);
// 執(zhí)行刪除操作
if(window.confirm('確認(rèn)要刪除['+rowData.id+']?')){
window.alert('進(jìn)行后臺處理.');
}
}
//編輯
function editRowData(node){
// 獲取到當(dāng)前的tr node
var tr = node.parentNode.parentNode;
// 獲取到當(dāng)前渲染tr 所使用的數(shù)據(jù)
var rowData = document.querySelector('table').GM('getRowData', tr);
// 執(zhí)行編輯頁面跳轉(zhuǎn)操作
if(window.confirm('確認(rèn)要修改當(dāng)前id為['+rowData.id+']的記錄嗎?')){
$.ajax({
url:"../goods/toEditGoods",//請求的url地址
dataType:"json",//返回的格式為json
async:true,//請求是否異步，默認(rèn)true異步，這是ajax的特性
data:{
"id":rowData.id
},//參數(shù)值
type:"POST",//請求的方式
beforeSend:function(){},//請求前的處理
success:function(data){
console.log("去后臺產(chǎn)品編輯");
},//請求成功的處理
complete:function(){},//請求完成的處理
error:function(){
alert("去產(chǎn)品編輯頁面出錯了...");
}//請求出錯的處理
});
}
}
//綁定搜索事件
document.querySelector('.search-action').addEventListener('click', function () {
var _query = {
name: document.querySelector('[name="name"]').value,
brandId: document.querySelector('[name="brandId"]').value,
isShow: document.querySelector('[name="isShow"]').value,
page: 1
};
table.GM('setQuery', _query, function(){
console.log('setQuery執(zhí)行成功');
});
});
//綁定重置
document.querySelector('.reset-action').addEventListener('click', function () {
document.querySelector('[name="name"]').value = '';
});
后端
封裝返回分頁結(jié)果
public class PageResult {
private List data;//數(shù)據(jù)結(jié)果集
private Long totals;//總記錄數(shù)
private String stasus;//返回狀態(tài)
...
}
controller
@ResponseBody
@RequestMapping(value = "/goodsPageListByQuery")
public PageResult goodsPageListByQuery(
@PageableDefault Pageable pageable,ProductQuery productQuery){
try {
PageInfo page = productService.ajaxPageProductList(productQuery, pageable);
long totals = page.getTotal();
List list = page.getList();
PageResult result=new PageResult(list, totals, "success");
return result;
} catch (Exception e) {
e.printStackTrace();
PageResult result=new PageResult(null,null , "error");
return result;
}
}
業(yè)務(wù)邏輯service
public PageInfo ajaxPageProductList(ProductQuery productQuery, Pageable pageable) {
// 分頁處理,從分頁插件中獲取數(shù)據(jù)
PageHelper.startPage(pageable.getPageNumber(), pageable.getPageSize());
List result = productDAO.queryProductPageLists(productQuery);
return new PageInfo<>(result);
}
DAO層xml文件
id, brand_id, name, weight, is_new, is_hot, is_commend, is_show, img_url, is_del,
description, package_list, colors, sizes, create_time
select
from product_tb
name like "%"#{name}"%"
and brand_id = #{brandId}
and is_show = #{isShow}
到此大功告成
總結(jié)
以上是生活随笔為你收集整理的java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java map类型转换_Java st
- 下一篇： mysql 允许远程_配置mysql允许