dataTables分页组合查询 springMVC Hibernate
2024-05-05 01:56:21
组合查询的字段：昵称，性别，年龄，和类型。dataTable列显示字段：编号，名称，性别，年龄，类型。
1 <body> 2 <form> 3 <span>昵称:</span> <input type="text" placeholder="名称" id="name-search"> 4 <span>性别:</span> <select id="sex-search"> 5 <option value="">全部</option> 6 <option value="男">男</option> 7 <option value="女">女</option> 8 </select> 9 <span>年龄:</span> <input type="text" placeholder="年龄" id="age-search"> 10 <span>类型:</span> <select id="type-search"> 11 <option value="">全部</option> 12 <option value="1">管理员</option> 13 <option value="2">用户</option> 14 </select> 15 <button type="button" id="btn_search">查询</button> 16 </form> 17 <table id="table" class="display"> 18 <thead> 19 <tr> 20 <th>编号</th> 21 <th>名称</th> 22 <th>性别</th> 23 <th>年龄</th> 24 <th>类型</th> 25 </tr> 26 </thead> 27 <tbody></tbody> 28 </table> 29 30 </body>
js代码：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%String server_path = request.getContextPath();
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../dataTables-1.10.15/media/css/jquery.dataTables.css">
<script type="text/javascript" src="../dataTables-1.10.15/media/js/jquery.js"></script>
<script type="text/javascript" src="../dataTables-1.10.15/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="../js/content.js"></script>
<script type="text/javascript">
var userManage = { getQueryCondition : function(data) {var param = {}; //组装排序参数 if (data.order && data.order.length && data.order[0]) { switch (data.order[0].column) { case 0: param.orderColumn = "id"; break; case 1: param.orderColumn = "name"; break; case 2: param.orderColumn = "age";//数据库列名称 break; default: param.orderColumn = "id"; break; } //排序方式asc或者desc param.orderDir = data.order[0].dir; } param.name = $("#name-search").val();//查询条件 param.sex = $("#sex-search").val();//查询条件param.age = $("#age-search").val();//查询条件param.type = $("#type-search").val();//查询条件 //组装分页参数 param.start = data.start; param.pageSize = data.length; param.draw = data.draw; return param; }, editItemInit : function(item) { alert("编辑"+item.id+" "+item.name); }, deleteItem : function(item) { alert("删除"+item.id+" "+item.name); }
}; $(document).ready( function () {var table = $("#table").dataTable($.extend(true,{},CONSTANT.DATA_TABLES.DEFAULT_OPTION, {ajax : function(data, callback, settings) { var param = userManage.getQueryCondition(data); $.ajax({ type: "POST", url: '<%= server_path%>/user/userlist', data: param, //传入已封装的参数 dataType: "json", success: function(result) { if (result.errorCode) { alert("查询失败"); return; } callback(result); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("查询失败"); } }); }, //绑定数据
columns: [ { data: "id",//字段名
}, { data: "name",
}, { data : "sex",
}, { data : "age",
}, { data : "type",
}, { data: null,//字段名 defaultContent:"",//无默认值
} ], //bSort: false, //是否启动各个字段的排序功能aaSorting: [[1, 'desc']],//默认排序列"createdRow": function ( row, data, index ) { //不使用render，改用jquery文档操作呈现单元格 var $btnEdit = $('<button type="button" class="btn-edit">修改</button>'); var $btnDel = $('<button type="button" class="btn-del">删除</button>'); $('td', row).eq(5).append($btnEdit).append($btnDel); }, })).api(); //组合查询 $("#btn_search").click(function(){ table.draw(); }); //按钮点击事件 table.on("click",".btn-edit",function() { //点击编辑按钮 var item = table.row($(this).closest('tr')).data(); userManage.editItemInit(item); });table.on("click",".btn-del",function() { //点击删除按钮 var item = table.row($(this).closest('tr')).data(); userManage.deleteItem(item); });
});</script>
</head><script type="text/javascript" src="../js/content.js"></script>的内容：
var CONSTANT = { DATA_TABLES : { DEFAULT_OPTION : { //DataTables初始化选项
language: { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, autoWidth: false, //禁用自动调整列宽 stripeClasses: ["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合 order: [], //取消默认排序查询,否则复选框一列会出现小箭头 processing: false, //隐藏加载提示,自行处理 serverSide: true, //启用服务器端分页 searching: false //禁用原生搜索
}, COLUMN: { CHECKBOX: { //复选框单元格 className: "td-checkbox", orderable: false, width: "30px", data: null, render: function (data, type, row, meta) { return '<input type="checkbox" class="iCheck">'; } } }, RENDER: { //常用render可以抽取出来，如日期时间、头像等 ELLIPSIS: function (data, type, row, meta) { data = data||""; return '<span title="' + data + '">' + data + '</span>'; } } }
}; 后台代码：
@Controller
@RequestMapping("/user")
public class UserController extends BaseController{@RequestMapping("userlist")public void getUserList(@RequestParam(value="start")Integer start,@RequestParam(value="pageSize")Integer pageSize,HttpServletResponse response) throws Exception{Page<User> page = new Page<User>();Integer total = userService.findCount(User.class);//查得总记录数List<User> users = userService.getUserlist(start, pageSize, null,null, null, null);//分页page.setRecordsTotal(total);page.setRecordsFiltered(total);page.setData(users);logger.info("获取用户列表userLists:" + users.size());response.getWriter().println(mapper.writeValueAsString(page));}
Page类：
public class Page<T> {Integer draw;//刷新次数Integer recordsTotal;//总记录数Integer recordsFiltered;//过滤List<T> data;//前台要显示的所有数据public Integer getDraw() {return draw;}public void setDraw(Integer draw) {this.draw = draw;}public Integer getRecordsTotal() {return recordsTotal;}public void setRecordsTotal(Integer recordsTotal) {this.recordsTotal = recordsTotal;}public List<T> getData() {return data;}public void setData(List<T> data) {this.data = data;}public Integer getRecordsFiltered() {return recordsFiltered;}public void setRecordsFiltered(Integer recordsFiltered) {this.recordsFiltered = recordsFiltered;}}
第二页：
转载于:https://www.cnblogs.com/chenhtblog/p/7896899.html
dataTables分页组合查询 springMVC Hibernate相关推荐
- 多条件组合查询+分页
比较麻烦,把他记录下来. 前台UI: 实现的类代码: 程序代码 /// <summary> /// 多条件组合查询 /// </summary> ...
- hibernate -- 分页模糊查询中setParameter 和setParameterList
在分页模糊查询中碰到setParameter 和setParameterList这两个方法 setParameter 以前就只会用setParameter(int arg,String str),我用 ...
- webform 分页、组合查询综合使用
界面: 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.as ...
- Webform（Linq高级查、分页、组合查询）
一.linq高级查 1.模糊查(包含) 1 public List<User> Select(string name) 2 { 3 return con.User.Where(r => ...
- WebForm 分页与组合查询
1.封装实体类 2.写查询方法 //SubjectData类 public List<Subject> Select(string name){List<Subject> li ...
- hibernate 多条件组合查询之sql拼接
hibernate 多条件组合查询之sql拼接 [java] view plaincopyprint? public static void main(String[] args) { Session ...
- java easyui条件组合查询_EasyUi+Spring Data 实现按条件分页查询
Spring data 介绍 Spring data 出现目的 为了简化.统一 持久层 各种实现技术 API ,所以 spring data 提供一套标准 API 和 不同持久层整合技术实现 . 自己 ...
- java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件 直接上插件API:链接地址 感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖 后端: pom文件添加: 1.7.0.RELEASE ...
- Spring+SpringMVC+Hibernate整合(封装CRUD操作)
前言:当前Web项目开发的框架主流应该非Spring+SpringMVC+Hibernate莫属,不管是工作还是学习中涉及框架技术,首先是要搭建一套运行环境,虽然网上框架整合的教程很多,但我还是输出此 ...
最新文章
- Android CoordinatorLayout使用
- Openstack组建部署 — Glance Install
- 用计算机做科学实验评课,科学小实验课程听课心得
- 阶段-关口系统--范围界定阶段---学习记录
- 详细讲解Python _init_()方法；为什么需要 innit方法?__init__传参
- matlab宏参赛,MATLAB杯无人机大赛 | 决赛通知！
- Apollo进阶课程⑳丨Apollo感知之旅——机器学习与感知的未来
- animition动画的加入
- 使用Red Hat OS为Amazon EC2实例安装SQL Server Linux
- python调用dos命令_基于Python执行dos命令并获取输出的结果
- Vmware 安装 ghost 版 win 7
- 4.2 各种各样的卷积层
- 数据库性能指标 2005-04-06 19:36:14（转载）
- 酒店消防安全知识培训PPT模板
- 用Linux给手机刷rec,【小白福利】手机端刷入第三方Rec，手把手教会你
- 规范JavaScript注释
- 2020年ROS机器人操作系统用户官方调查
- 微信小程序上传视频功能的简单实现
- HDU 613 Kolakoski
- 开发者在掘金路上的选择