spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询
2017-09-13 14:36
567 查看
spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询
数据库层ImageRepository 代码
package com.easy.kotlin.chapter11_kotlin_springboot.dao
import com.easy.kotlin.chapter11_kotlin_springboot.entity.Image
import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.data.jpa.repository.Query
import org.springframework.data.repository.PagingAndSortingRepository
import org.springframework.data.repository.query.Param
/**
* Created by jack on 2017/7/17.
*
*
@Query注解里面的value和nativeQuery=true,意思是使用原生的sql查询语句.
sql模糊查询like语法,我们在写sql的时候是这样写的
like '%?%'
但是在@Query的value字符串中, 这样写
like %?1%
*/
interface ImageRepository : PagingAndSortingRepository<Image, Long> {
@Query("SELECT a from #{#entityName} a where a.category like %?1%")
fun findByCategory(category: String): MutableList<Image>
@Query("select count(*) from #{#entityName} a where a.url = ?1")
fun countByUrl(url: String): Int
@Query("SELECT a from #{#entityName} a where a.category like %:searchText%")
fun search(@Param("searchText") searchText: String, pageable: Pageable): Page<Image>
}Controller 层
JSON 接口代码@RequestMapping(value = "wotuSearchJson", method = arrayOf(RequestMethod.GET))
@ResponseBody
fun wotuSearchJson(@RequestParam(value = "page", defaultValue = "0") page: Int,
@RequestParam(value = "size", defaultValue = "10") size: Int,
@RequestParam(value = "searchText", defaultValue = "") searchText: String): Page<Image>? {
return getPageResult(page, size, searchText)
}
private fun getPageResult(page: Int, size: Int, searchText: String): Page<Image>? {
val sort = Sort(Sort.Direction.DESC, "id")
val pageable = PageRequest(page, size, sort)
if(searchText==""){
return imageRepository?.findAll(pageable)
}else{
return imageRepository?.search(searchText, pageable)
}
}RequestMapping ModelAndView代码
@RequestMapping(value = "meituView", method = arrayOf(RequestMethod.GET))
fun meituView(): ModelAndView {
return ModelAndView("meituView")
}视图 meituView.ftl 代码
<#include 'head.ftl'> <#include 'nav.ftl'> <table id="meituTable"></table> <#include 'foot.ftl'>
其中，
head.ftl
<!doctype html> <html> <head> <meta http-equiv=content-type content=text/html;charset=utf-8> <meta http-equiv=X-UA-Compatible content=IE=Edge> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>我图</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="bower_components/bootstrap-table/src/bootstrap-table.css"> <link href="app.css" rel="stylesheet"> </head> <body>
需要注意的是，bootstrap-table与bootstrap 3是兼容的。但是bootstrap 4还不行。
nav.ftl
<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">我图</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="meituView">美图列表</a></li> <li class=""><a href="doCraw" target="_blank">执行抓取</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Kotlin极简教程 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="http://www.jianshu.com/nb/12976878" target="_blank">Kotlin</a></li> <li><a href="#">SpringBoot</a></li> <li><a href="#">Java</a></li> <li class="divider"></li> <li><a href="#">Scala</a></li> <li class="divider"></li> <li><a href="#">Groovy</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#">关于</a> </li> </ul> <#--<form class="navbar-form navbar-left" role="search">--> <#--<div class="form-group" id="search">--> <#--<input type="text" class="form-control" placeholder="Search">--> <#--</div>--> <#--<button type="submit" class="btn btn-default">搜索</button>--> <#--</form>--> </div> </div> </nav>
foot.ftl
<script src="DataTables/media/js/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script> <script src="bower_components/bootstrap-table/src/bootstrap-table.js"></script> <script src="bower_components/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script> <script src="sloth.js"></script> <script src="app.js"></script> </body> </html>
前端 app.js 代码
$(function () {
var searchText = $('.search').find('input').val()
var columns = [];
columns.push({
title: 'ID',
field: '',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
return row.id
}
});
columns.push({
title: '分类',
field: 'category',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
return value
}
}, {
title: '美图',
field: 'url',
align: 'center',
valign: 'middle',
formatter: function (value, row, index) {
return "<a target='_blank' class='full-width' href='" + value + "'>![](" + value + ")</a>"
}
})
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
$('#meituTable').bootstrapTable({
url: 'wotuSearchJson',
sidePagination: "server",
queryParamsType: 'page,size',
contentType: "application/x-www-form-urlencoded",
method: 'get',
striped: false, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
paginationLoop: true,
paginationHAlign: 'right', //right, left
paginationVAlign: 'bottom', //bottom, top, both
paginationDetailHAlign: 'left', //right, left
paginationPreText: ' 上一页',
paginationNextText: '下一页',
search: true,
searchText : searchText,
searchTimeOut: 500,
searchAlign: 'right',
searchOnEnterKey: false,
trimOnSearch: true,
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
sortName: "id",
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [5, 10, 20, 50, 100], // 可选的每页数据
totalField: 'totalPages',
dataField: 'content', //后端 json 对应的表格数据 key
columns: columns,
queryParams: function (params) {
return {
size: params.pageSize,
page: params.pageNumber,
sortName: params.sortName,
sortOrder: params.sortOrder,
searchText: params.searchText
}
},
classes: 'table table-responsive full-width',
})
$(document).on('keydown', function (event) {
// 键盘翻页事件
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 38 || e && e.keyCode == 37) {//上,左
// 上一页
$('.page-pre').click()
}
if (e && e.keyCode == 40 || e && e.keyCode == 39) {//下,右
// 下一页
$('.page-next').click()
}
})
})其中，
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
是 中文支持。
var searchText = $('.search').find('input').val() 这里的$('.search').find('input')输入框是bootstrapTable框架的搜索输入框。
完整工程源代码：
https://github.com/EasyKotlin/chatper15_net_io_img_crawler
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- SpringMVC+Spring Data JPA +Bootstrap 分页实现和模糊查询分页
- spring-data-jpa 介绍 复杂查询，包括多表关联，分页，排序等
- Spring Data Jpa --分页、排序查询
- EasyUi+Spring Data 实现按条件分页查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- spring data jpa 条件分页查询
- Bootstrap-table学习笔记（二）——前后端分页模糊查询
- 在Spring Boot中使用Spring-data-jpa实现分页查询
- SpringData 内置分页查询方法 （包含排序）
- EasyUi+Spring Data 实现按条件分页查询的实例代码
- Spring MVC和Spring Data JPA之按条件查询和分页（kkpaper分页组件）
- spring data jpa中@Query中的模糊查询<like关键字>
- IOS-CoreData（增删改查、表关联、分页和模糊查询、多个数据库）
- Spring MVC结合Spring Data JPA实现按条件查询和分页
- 模糊查询：Spring Data JPA 如何进行模糊查询(LIKE) ?
- Spring Data MongoDB 五：进阶文档查询（分页、Morphia）（二）
- EasyUi+Spring Data 实现按条件分页查询
- spring data jpa bootstrap table 后端分页（详解）
- spring-data-jpa 介绍 复杂查询，包括多表关联，分页，排序
- spring data jpa中@Query中的模糊查询 like 关键字