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框架的搜索输入框。