溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹java項目中使用datatables如何實現一個帶條件查詢功能，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
使用datatables自帶后臺查詢
前臺代碼：
<!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" >
<script type="text/javascript" language="javascript"
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 search2()
{
table.ajax.reload();
}
</script>
</head>
<body class="dt-example">
<div>
<input type="text" id="level1">
<input type="button" onclick="search2()" 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格式返回給前臺
@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的聲明如下：
public class DatatablesViewPage<T> {
private List<T> aaData; //aaData 與datatales 加載的“dataSrc"對應
private int iTotalDisplayRecords;
private int iTotalRecords;
public DatatablesViewPage() {
}
//get set方法 此處省略
}在后臺傳輸數據也可以用fastjson ；
@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);
}關于java項目中使用datatables如何實現一個帶條件查詢功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
