spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询

简介: spring-data-jpa + SpringBoot + bootstrapTable 后端分页 模糊查询数据库层ImageRepository 代码package com.

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

相关文章
|
6天前
|
存储 安全 Java
SpringBoot搭建Spring Security 入门
SpringBoot搭建Spring Security 入门
28 0
|
28天前
|
XML Java 数据库
【Spring】SpringBoot 配置文件
【Spring】SpringBoot 配置文件
|
2天前
|
XML Java 开发者
Spring 和 Spring Boot 的区别
【2月更文挑战第3天】
38 0
|
2天前
|
供应链 Java
云HIS技术架构:Angular+Nginx+Java+Spring,SpringBoot
标准数据维护 用户信息:维护用户的基本信息,所在科室以及各个系统所具体的权限。 科室信息:维护医院的科室信息。 数据字典:标准字典信息的维护。 药品/诊疗目录维护:维护药品和诊疗目录的基本信息。
13 2
|
6天前
|
XML 监控 druid
【Java专题_02】springboot+mybatis+pagehelper分页插件+druid数据源详细教程
【Java专题_02】springboot+mybatis+pagehelper分页插件+druid数据源详细教程
30 0
|
6天前
|
前端开发 Java 数据库连接
认识Java中最常用的框架:Spring、Spring MVC、Spring Boot、MyBatis和Netty
Spring框架 Spring是一个轻量级的开源框架,用于构建企业级应用。它提供了广泛的功能,包括依赖注入、面向切面编程、事务管理、消息传递等。Spring的核心思想是控制反转(IoC)和面向切面编程(AOP)。
28 3
|
21天前
|
Java 测试技术 Maven
【SpringBoot】仿 spring-boot-project 自定义 starters
【SpringBoot】仿 spring-boot-project 自定义 starters
|
25天前
|
缓存 Java uml
SpringBoot2 | Spring IOC 流程中核心扩展接口的12个扩展点源码分析(十一)
SpringBoot2 | Spring IOC 流程中核心扩展接口的12个扩展点源码分析(十一)
24 0
|
25天前
|
缓存 Java uml
SpringBoot2 | Spring AOP 原理深度源码分析(八)
SpringBoot2 | Spring AOP 原理深度源码分析(八)
33 0
QGS
|
27天前
|
前端开发 Java 关系型数据库
手拉手全栈springboot+vue2+Element实现分页
手拉手全栈springboot+vue2+Element实现分页
QGS
18 0

相关产品

  • 云迁移中心