當前位置：首頁 > 编程语言 > c/c++ >内容正文

c/c++

dataTables分页组合查询 springMVC Hibernate

發布時間：2023/12/31 c/c++ 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 dataTables分页组合查询 springMVC Hibernate 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

組合查詢的字段：昵稱，性別，年齡，和類型。
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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。