datatablesクエリー条件付きjavaサービス側ページング処理
17848 ワード
datatablesのバックグラウンドを使用してフロントコードをクエリーします.
JAvaコードは以下のようにspringの@ResponseBodyを用いて結果をjson形式に変換してフロントに返す
DatablesViewPageの声明は次のとおりです.
バックグラウンドでデータを転送してもfastjsonを使用できます.
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico"
href="http://www.datatables.net/favicon.ico">
<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">
<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>Nameth>
<th>Positionth>
tr>
thead>
table>
body>
html>JAvaコードは以下のようにspringの@ResponseBodyを用いて結果をjson形式に変換してフロントに返す
@RequestMapping(value="/datatablesTest", method=RequestMethod.GET)
@ResponseBody
public DatatablesViewPage 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 list = new ArrayList();
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 view = new DatatablesViewPage();
view.setiTotalDisplayRecords(100);
view.setiTotalRecords(100);
view.setAaData(list);
return view;
} DatablesViewPageの声明は次のとおりです.
public class DatatablesViewPage {
private List 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
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 listMap = new HashMap();
List list = new ArrayList();
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);
}