使用datatables自帶后臺查詢
前臺代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" rel="external nofollow" ><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"><link rel="stylesheet" type="text/css" href="../../js/DataTables-1.10.8/media/css/jquery.dataTables.css" rel="external nofollow" > src="../../js/DataTables-1.10.8/media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="../../js/DataTables-1.10.8/media/js/jquery.dataTables.js"></script><script type="text/javascript" language="javascript" class="init"> var table;$(document).ready(function() { table = $('#example').DataTable( { "pagingType": "simple_numbers",//設置分頁控件的模式 searching: false,//屏蔽datatales的查詢框 aLengthMenu:[10],//設置一頁展示10條記錄 "bLengthChange": false,//屏蔽tables的一頁展示多少條記錄的下拉列表 "oLanguage": { //對表格國際化 "sLengthMenu": "每頁顯示 _MENU_條", "sZeroRecords": "沒有找到符合條件的數據", // "sProcessing": "<img src='./loading.gif' />", "sInfo": "當前第 _START_ - _END_ 條 共計 _TOTAL_ 條", "sInfoEmpty": "木有記錄", "sInfoFiltered": "(從 _MAX_ 條記錄中過濾)", "sSearch": "搜索：", "oPaginate": { "sFirst": "首頁", "sPrevious": "前一頁", "sNext": "后一頁", "sLast": "尾頁" } }, "processing": true, //打開數據加載時的等待效果 "serverSide": true,//打開后臺分頁 "ajax": { "url": "../../alarms/datatablesTest", "dataSrc": "aaData", "data": function ( d ) { var level1 = $('#level1').val(); //添加額外的參數傳給服務器 d.extra_search = level1; } }, "columns": [ { "data": "total" }, { "data": "level" } ] } );} );function search1(){ table.ajax.reload();} </script></head><body class="dt-example"> <div> <input type="text" id="level1"> <input type="button" onclick="search1()" value="查詢"> </div> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> </tr> </thead> </table></body></html> |
Java代碼如下，使用spring的 @ResponseBody將結果轉換成json格式返回給前臺
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
@RequestMapping(value="/datatablesTest", method=RequestMethod.GET) @ResponseBody public DatatablesViewPage<Alarm> datatablesTest(HttpServletRequest request){//獲取分頁控件的信息 String start = request.getParameter("start"); System.out.println(start); String length = request.getParameter("length"); System.out.println(length);//獲取前臺額外傳遞過來的查詢條件 String extra_search = request.getParameter("extra_search"); System.out.println(extra_search); //隨便組織的查詢結果 List<Alarm> list = new ArrayList<Alarm>(); Alarm alarm = new Alarm(); alarm.setLevel(1); alarm.setTotal(100L); list.add(alarm); alarm = new Alarm(); alarm.setLevel(2); alarm.setTotal(100L); list.add(alarm); DatatablesViewPage<Alarm> view = new DatatablesViewPage<Alarm>(); view.setiTotalDisplayRecords(100); view.setiTotalRecords(100); view.setAaData(list); return view; } |
DatatablesViewPage的聲明如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
public class DatatablesViewPage<T> { private List<T> aaData; //aaData 與datatales 加載的“dataSrc"對應 private int iTotalDisplayRecords; private int iTotalRecords; public DatatablesViewPage() { }//get set方法 此處省略} |
在后臺傳輸數據也可以用fastjson ；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
@ResponseBody @RequestMapping("/datatable2") public JSON getTable2(String aoData){ String sEcho = "";// 記錄操作的次數 每次加1 String iDisplayStart = "";// 起始 String iDisplayLength = "";// size String sSearch = "";// 搜索的關鍵字 int count = 1 ; //查詢出來的數量 JSONArray alldata = JSON.parseArray(aoData); for (int i = 0; i <alldata.size() ; i++) { JSONObject obj = (JSONObject) alldata.get(i); if (obj.get("name").equals("sEcho")) sEcho = obj.get("value").toString(); if (obj.get("name").equals("iDisplayStart")) iDisplayStart = obj.get("value").toString(); if (obj.get("name").equals("iDisplayLength")) iDisplayLength = obj.get("value").toString(); if (obj.get("name").equals("sSearch")) sSearch = obj.get("value").toString(); } DataTableModel u1 = new DataTableModel(); u1.setFirst_name("Airi"); u1.setLast_name("Satou"); u1.setPosition("Accountant"); u1.setOffice("Tokyo"); u1.setStart_date("28th Nov 08"); u1.setSalary("$162,700"); Map<String,Object> listMap = new HashMap<String, Object>(); List<DataTableModel> list = new ArrayList<DataTableModel>(); list.add(u1); listMap.put("iTotalRecords",count); listMap.put("sEcho",Integer.parseInt(sEcho)+1); listMap.put("iTotalDisplayRecords",count); listMap.put("aaData",list); return (JSON)JSON.toJSON(listMap); } |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：http://blog.csdn.net/lllliulin/article/details/51193004
