java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
總覽：
一. GridManager.js表格插件
直接上插件API:鏈接地址
感覺(jué)該插件簡(jiǎn)單好用，插件作者也是有問(wèn)必答，nice
二. 添加依賴(lài)
后端： 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
前端
三. 具體實(shí)現(xiàn)
頁(yè)面容器
產(chǎn)品名稱(chēng):
請(qǐng)選擇品牌:
上下架:
下架
上架
搜索
重置
1.填充品牌下拉框
頁(yè)面引入品牌js腳本
brand-select.js
$(function(){
$.ajax({
url:"../brand/selectPageByQueryAjax",//請(qǐng)求的url地址
dataType:"json",//返回的格式為json
async:true,//請(qǐng)求是否異步，默認(rèn)true異步，這是ajax的特性
data:{},//參數(shù)值
type:"POST",//請(qǐng)求的方式
beforeSend:function(){},//請(qǐng)求前的處理
success:function(data){
var brands = data.dataObject;
$("#brandId").find("option").remove();//防止重復(fù)追加
$("#brandId").append("請(qǐng)選擇品牌");
$.each(brands, function(i, item) {
$("#brandId").append(""+item.name+"");
});
},//請(qǐng)求成功的處理
complete:function(){},//請(qǐng)求完成的處理
error:function(){
alert("error...");
}//請(qǐng)求出錯(cuò)的處理
});
});
查詢(xún)品牌后端 較為簡(jiǎn)單，只貼主要代碼
@ResponseBody
@RequestMapping(value = "selectPageByQueryAjax")
public JsonResult toEditBrand(){
JsonResult result = new JsonResult<>();
List brands = brandService.selectPageByQueryAjax();
result.setDataObject(brands);
return result;
}
2.分頁(yè)條件查詢(xún)產(chǎn)品
頁(yè)面引入該JS腳本
js內(nèi)容如下:
var table = document.querySelector('table')
var TGM = table.GM({
supportDrag: false//是否支持拖拽功能
,supportRemind: true//是否支持提示信息功能
,gridManagerName: 'test'//表格grid-manager所對(duì)應(yīng)的值[可在html中配置]
,isCombSorting: true //是否使用組合排序功能
,height: 'auto'//配置表格區(qū)域的高度，需要帶單位.如 '100px' 或 '50%'
,width:'1040px'
,supportAjaxPage:true//指定列表是否支持分頁(yè)
,supportSorting: true//配置是否支持排序功能, 非必填項(xiàng)，默認(rèn)為 false。
,disableCache: false//用于配置是否禁用用戶(hù)記憶功能, 非必填項(xiàng)，默認(rèn)為false
,ajax_url: '../goods/goodsPageListByQuery' //請(qǐng)求url
,ajax_type: 'POST'//ajax請(qǐng)求類(lèi)型['GET', 'POST']默認(rèn)GET
,query: {
"isShow":false,//后臺(tái)傳參,默認(rèn)下架
}//配置接口請(qǐng)求參數(shù)，可用于搜索條件傳遞;注意事項(xiàng):如果是對(duì)已實(shí)例化表格增加請(qǐng)求參數(shù)，請(qǐng)使用.setQuery()方法。
,dataKey: 'list' // 數(shù)據(jù)本身返回為data, 把數(shù)據(jù)名模擬為list, 再通responseHandler去更改
,textAlign: 'center'//在v2.3.15將棄用,請(qǐng)使用columnData 中的 align進(jìn)行配置
,totalsKey:'totals' //數(shù)據(jù)總條數(shù)
,sizeData:[5,10,20] //配置表格每頁(yè)顯示條數(shù)選擇項(xiàng)，只允許正整數(shù)。[10,20,30,50,100]默認(rèn)
,pageSize:5 //配置初始進(jìn)入時(shí)每頁(yè)的顯示條數(shù)，需要與sizeData中的值匹配。
// 可以通過(guò)該方法修改全部的請(qǐng)求參數(shù)
,requestHandler: function(request){
request.newParams = '這個(gè)參數(shù)是通過(guò) requestHandler 函數(shù)新增的';
}
// 可以通過(guò)該方法修改返回的數(shù)據(jù)
,responseHandler: function(response){
response.list = response.data;
}
//表格列配置參數(shù)，數(shù)組類(lèi)型。單個(gè)數(shù)組元素為對(duì)象類(lèi)型，每一個(gè)元素對(duì)應(yīng)一個(gè)表格列。
//通過(guò)該參數(shù)，可以對(duì)列進(jìn)行配置。
,columnData: [{
key: 'id',// 列的唯一索引。字符串類(lèi)型，必設(shè)項(xiàng)
remind: 'the id',// 列的表頭提醒內(nèi)容,字符串類(lèi)型，非必設(shè)項(xiàng)
// align: 'center',
text: '產(chǎn)品ID'//列表頭顯示名稱(chēng)
},{
key: 'name',
remind: 'the name',
text: '產(chǎn)品名稱(chēng)'
},{
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: '是否熱賣(mài)',
template: function(isNew, rowObject){
return isNew === 1 ? '是' : '否';
}
},{
key: 'createTime',
remind: 'the createTime',
text: '創(chuàng)建時(shí)間',
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 '刪除'
+' 編輯';
}
}
]
// 分頁(yè)前事件
,pagingBefore: function(query){
console.log('pagingBefore', query);
}
// 分頁(yè)后事件
,pagingAfter: function(data){
console.log('pagingAfter', data);
}
}, function(query){
// 渲染完成后的回調(diào)函數(shù)
console.log('渲染完成后的回調(diào)函數(shù):', query);
});
//日期格式化,不是插件的代碼,只用于處理時(shí)間格式化
Date.prototype.format = function(fmt){
var o = {
"M+": this.getMonth() + 1, //月份
"D+": this.getDate(), //日
"d+": this.getDate(), //日
"H+": this.getHours(), //小時(shí)
"h+": this.getHours(), //小時(shí)
"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)要?jiǎng)h除['+rowData.id+']?')){
window.alert('進(jìn)行后臺(tái)處理.');
}
}
//編輯
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í)行編輯頁(yè)面跳轉(zhuǎn)操作
if(window.confirm('確認(rèn)要修改當(dāng)前id為['+rowData.id+']的記錄嗎?')){
$.ajax({
url:"../goods/toEditGoods",//請(qǐng)求的url地址
dataType:"json",//返回的格式為json
async:true,//請(qǐng)求是否異步，默認(rèn)true異步，這是ajax的特性
data:{
"id":rowData.id
},//參數(shù)值
type:"POST",//請(qǐng)求的方式
beforeSend:function(){},//請(qǐng)求前的處理
success:function(data){
console.log("去后臺(tái)產(chǎn)品編輯");
},//請(qǐng)求成功的處理
complete:function(){},//請(qǐng)求完成的處理
error:function(){
alert("去產(chǎn)品編輯頁(yè)面出錯(cuò)了...");
}//請(qǐng)求出錯(cuò)的處理
});
}
}
//綁定搜索事件
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 = '';
});
后端
封裝返回分頁(yè)結(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) {
// 分頁(yè)處理,從分頁(yè)插件中獲取數(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分页插件...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java map类型转换_Java st
- 下一篇： c语言手机通讯录退出程序,通讯录小程序（