一、部分技术选型

前端
Thymeleaf 模板引擎
jquery js框架
layer提示框、弹出层、日期
dataTables表格插件（基于jquery）

后台
Springboot+MybatisPlus

数据库
mysql

开发工具
IDEA

二、项目结构

三、功能需求和效果展示

展示数据、实现分页和查询功能

四、关键代码

4.1页面sc_dyj.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" /><link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet" /><link rel="stylesheet" th:href="@{/erp/css/style.css}"/><link th:href="@{/erp/assets/css/codemirror.css}" rel="stylesheet"><link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}" /><link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}" /><!--[if IE 7]><link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome-ie7.min.css}" /><![endif]--><!--[if lte IE 8]><link rel="stylesheet" th:href="@{/erp/assets/css/ace-ie.min.css}" /><![endif]--><script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script><script th:src="@{/erp/assets/js/bootstrap.min.js}"></script><script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script><script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script><script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script><script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript" ></script><script th:src="@{/erp/assets/js/jquery-ui-1.10.3.custom.min.js}"></script><script th:src="@{/erp/assets/js/jquery.ui.touch-punch.min.js}"></script><script th:src="@{/erp/assets/js/ace-elements.min.js}"></script><script th:src="@{/erp/assets/js/ace.min.js}"></script>
<title>激光打印机管理</title><script type="text/javascript">jQuery(function($) {//表格渲染var table =$("#sample-table").dataTable( {"autoWidth": false,searching: false,ordering: true,serverSide: true,ajax: {url: "/list",type: "post",data: function (d) {var data = $('form').serialize();   //获取查询条件//获取分页信息var searchParams = {start: d.start,length: d.length,};data = data + '&' + $.param(searchParams);return data;}},columnDefs: [{"defaultContent": "","targets": "_all"}],columns: [{"data": "id", "createdCell": function (td, cellData, rowData, row, col) {$(td).empty().append('<label><input type="checkbox" value="' + rowData.id + '" id="ID" name="yy"  class="ace"><span\n' +'                                            class="lbl"></span></label>');}},{"data":"pnum"},{"data":"pserver"},{"data":"pdescribe"},{"data":"pip"},{"data":"pline"},{"data":"premark"},{"data": "premark", "createdCell": function (td, cellData, rowData, row, col) {$(td).empty().append('  <a title="编辑" οnclick="member_edit(this)" href="javascript:;"  class="btn btn-xs btn-info" ><i class="icon-edit bigger-120"></i></a>\n' +'                <a title="删除" href="javascript:;"  οnclick="member_del(this,\'1\')" class="btn btn-xs btn-warning" ><i class="icon-trash  bigger-120"></i></a>');}},]});//搜索按钮事件$("#search").click(function () {console.log(111111);table.fnUpdate();});$('table th input:checkbox').on('click' , function(){var that = this;$(this).closest('table').find('tr > td:first-child input:checkbox').each(function(){this.checked = that.checked;$(this).closest('tr').toggleClass('selected');});});})</script>
</head><body><div class="margin clearfix"><div class="stystems_style"><div class="tabbable"><div class="page-content clearfix"><div id="Member_Ratings"><div class="tab-content"><div id="home" class="tab-pane active"><!-- 查询功能--><div class="search_style"><form><ul class="search_content clearfix"><li><label class="l_f">查询打印机：</label><input type="text" id="pNum" name="pNum"class="text_add"placeholder="输入打印机编号"style=" width:400px"/></li><li style="width:90px;"><button type="button" class="btn_search" id="search"><iclass="icon-search"></i>查询</button></li></ul></form></div><!--表格--><table class="table table-striped table-bordered table-hover" id="sample-table"><thead><tr><th width="25"><label><input type="checkbox" id="btnAllChk" class="ace"><span class="lbl"></span></label></th><th width="150">打印机编号</th><th width="80">服务器</th><th width="150">描述</th><th width="120">IP地址</th><th width="80">责任产线</th><th width="250">备注</th><th width="250">操作</th></tr></thead><tbody></tbody></table></div></div></div></div></div></div>
</div>
</body>
</html>

4.2controller层

package com.bigdata.controller;import com.bigdata.entity.Printer;
import com.bigdata.service.IPrinterService;
import com.bigdata.util.DataTablePage;
import com.bigdata.util.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.List;/*** <p>* 激光打印机管理* </p>** @author bigdata* @since 2021-03-19*/
@Controller
public class PrinterController {@Autowiredprivate IPrinterService printerService;@RequestMapping("")public String page() {return "laser/sc_dyj";}@ResponseBody@RequestMapping("list")public Page list(@RequestParam(required = false)  String pNum, Integer start, Integer length) {//当前条件查询到的数据List<Printer> printerByCompanyId = printerService.getPrinterByCompanyId("2", pNum, start, length);//当前条件查询到的条数int count =printerService.getCount(pNum,"2");//返回datatable对应的json格式return new DataTablePage(count,count,printerByCompanyId);}
}

4.3 mapper层

4.3.1PrinterMapper

package com.bigdata.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.bigdata.entity.Printer;import java.util.List;/*** <p>*  Mapper 接口* </p>** @author bigdata* @since 2021-03-19*/
public interface PrinterMapper extends BaseMapper<Printer> {/***  根据公司id，查询条件，分页条件查询* @param companyId* @param pNum* @param start* @param length* @return*/List<Printer> getPrinterByCompanyId(String companyId, String pNum, Integer start, Integer length);/*** 根据公司id，查询条件，查询总条数* @param pNum* @param companyId* @return*/Integer getCount(String pNum,String companyId);
}

4.3.2PrinterMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bigdata.mapper.PrinterMapper"><select id="getPrinterByCompanyId" resultType="Printer">SELECT * FROM t_printerWHERE company_id =#{companyId}<if test="pNum != null and pNum != ''"><bind name="pNum" value="'%'+pNum+'%'"/>and p_num LIKE #{pNum}</if>LIMIT #{start},#{length}</select><select id="getCount" resultType="Integer">SELECT count(*) FROM t_printerWHERE company_id = #{companyId}<if test="pNum != null and pNum != ''"><bind name="pNum" value="'%'+pNum+'%'"/>and p_num LIKE #{pNum}</if></select>
</mapper>

五、案例下载链接

Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能

六、总结

1.注意controller的接口拿到的分页数值是integer类型，sql语句需要的也是数值。容易写成String类型。
2.数据返回时，注意需要用到page，而且需要@ResponseBody注解。注解容易忘了写。

Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能相关推荐

datatables html定义,DataTables表格插件使用说明
DataTables简介与EasyUI的Datagrid作用一样,比easyui更漂亮 Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功 ...
我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
Spring Boot Initilizr - 使用IDE或IDE插件
Spring Boot Initilizr 使用IDE或IDE插件这是我之前的帖子的延续.在阅读这篇文章之前,请先阅读我在" Spring Boot Initilizr Web界面 &qu ...
微服务之spring Boot+MyBatis-Plus +mysql框架
小白也会搭建spring Boot+MyBatis-Plus +mysql框架一.新建一个微服务模块cloud-user 1. 搭建步骤二.编码 1.新建UserController类 2.新建U ...
Spring Boot —— Mybatis-Plus（小试小刀）
文章目录 Spring Boot -- Mybatis-Plus 简介集成步骤加依赖加配置加注解使用生成器执行生成器测试的数据结构SQL demo地址 Spring Boot -- My ...
[转]jQuery美化表格插件tablecloth.js
转自给力技术 jQuery美化表格插件 - tablecloth.js tablecloth.js 是基于 Twitter Bootstrap 的 jQuery 插件,可让你快速对表格加上漂亮的样式 ...
[转]jQuery美化表格插件 - tablecloth.js
转自给力技术 jQuery美化表格插件 - tablecloth.js tablecloth.js 是基于 Twitter Bootstrap 的 jQuery 插件 ,可让你快速对表格加上漂亮的样 ...
Spring boot整合jpa Jquery实现三级联动
Spring boot 整合jpa JQuery 实现省,市,区, 三级联动效果三级联动在很多项目都必不可少,尤其是在付款时,需要选取地址,为了更好的用户体验感,从而出现了三级联动. 实现三级联动的 ...
猿创征文 | 微服务 Spring Boot 整合Redis 实战开发解决高并发数据缓存
文章目录一.什么是缓存? ⛅为什么用缓存? ⚡如何使用缓存二.实现一个商家缓存 ⌛环境搭建 ♨️核心源码 ✅测试接口三.采用微服务 Spring Boot 注解开启缓存 ✂️@CacheEn ...