datatables 带查询条件java服务端分页处理实例
程序员文章站
2023-12-22 14:53:46
使用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 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格式返回给前台
@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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。