spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询
来源：互联网 发布：甲骨文数据库培训 编辑：程序博客网 时间：2024/06/11 21:13
spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询
数据库层ImageRepository 代码
package com.easy.kotlin.chapter11_kotlin_springboot.daoimport com.easy.kotlin.chapter11_kotlin_springboot.entity.Imageimport org.springframework.data.domain.Pageimport org.springframework.data.domain.Pageableimport org.springframework.data.jpa.repository.Queryimport org.springframework.data.repository.PagingAndSortingRepositoryimport 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
阅读全文
0 0
- spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询
- spring data jpa 分页查询
- spring data jpa分页查询
- spring data jpa 分页查询
- springBoot+easyui +spring data JPA 实现分页
- 【Spring-data-jpa】根据userName模糊查询
- Spring jpa data多条件分页查询
- spring data jpa 条件分页查询
- Spring Data Jpa --分页、排序查询
- Spring Data JPA自定义查询，分页，排序
- Spring Data Jpa实现分页查询
- spring data jpa bootstrap table 后端分页（详解）
- spring jpa 模糊查询
- JPA 分页查询 （Spring Data Jpa 5）
- bootstrapTable后端分页
- spring data jpa中@Query中的模糊查询<like关键字>
- spring data jpa 分页
- springboot整合spring data jpa
- Java 查找 List 中的最大值、最小值
- JQuery中bind和unbind函数
- 免费的编程中文书籍索引【必须转载、有空必看】
- [zz学习]MySQL索引背后的数据结构及算法原理
- 最近邻 相关推荐
- spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询
- javascript drag()拖拽
- 一致性（连续性）hash算法（Consistent hashing）
- 成为高级程序员的 10 个步骤
- 解决Spring Spring Data JPA 错误： Page 1 of 1 containing UNKNOWN instances
- json文件注意事项
- 使用docker创建python3.5
- spring data jpa @Query注解中delete语句报错 ： @Modifying注解的使用
- Java Web 实现导航栏 active 状态随着页面自动切换
