Datatables 서버 모드 사용
13476 단어 jquery전단datatables
Datatables jquery 。 。 , 。[Datatables ](http://dt.thxopen.com/index.html)[github ](https://github.com/fudanstar/DataTables)
, webservice , , , 。
javascript 코드
table = $('#resultfile_datatable').DataTable(// Datatable
{
ajax : {// ajax
"url": "*******",//
"dataSrc": function (json) {// ,jason
var dataSet = new Array();
dataSet=json.data;
...//
return dataSet;// datatable
}
},
serverSide: true,// , true
processing: true,// true,
columns : [ {"data" : "name"}, //
{"data" : "proTopicName"},
{"data" : "missionName"},
{"data" : "areaName"},
{"data" : "fileformat"},
{"data" : "research"},
{"data" : "category"},
{"data" : null} ],
columnDefs : [ {// ,
targets : 7,// 8 , 8 , 。
render : function(data, type, row) {//
var html = ' <button type="button" class="btn btn-info btn-sm" "> </button><br><br> <button type="button" class="btn btn-danger btn-sm" "> </button>';// button, ,
return html;// html , 8
}
},{
orderable:false,//
targets:[1,2,3,5,6] //
}
],
"language": {//
"processing":"<p style=\"font-size: 20px;color: #F79709;\"> 。。。。 !</p>",//
"lengthMenu": "_MENU_ ",
"zeroRecords": " ",
"info": " _PAGE_ ( _PAGES_ )",
"infoEmpty": " ",
"infoFiltered": "( _MAX_ )",
"paginate": {
"previous": " ",
"next": " "
}
},
"dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +"t" +"<'row'<'col-xs-6'i><'col-xs-6'p>>",//
initComplete : function() {//
$("#mytool").append('<button type="button" class="btn btn-warning btn-sm" id="importfilebutton" onclick="jumpimportfilepage();"> </button>');//
}
});
}
백그라운드 액 션 코드
//
private String draw = "0";
//
private String start;
//
private String length;
//
private String recordsTotal = "0";
//
private String recordsFiltered = "";
//
private String[] cols = {"name", "proTopicName", "missionName", "areaName", "fileformat", "areaName", "research", "category"};
//
private String orderColumn = "0";
// asc
private String orderDir = "asc";
//
private String searchValue;
public void getAllResultFiles() throws IOException
{
//
HttpServletRequest request = ServletActionContext.getRequest();
draw=request.getParameter("draw");
start = request.getParameter("start");
length = request.getParameter("length");
orderColumn = request.getParameter("order[0][column]");
orderColumn = cols[Integer.parseInt(orderColumn)];
orderDir = request.getParameter("order[0][dir]");
searchValue = request.getParameter("search[value]");
List<String> sArray = new ArrayList<String>();
if (!searchValue.equals("")) {// ,
sArray.add(" name like '%" + searchValue + "%'");
sArray.add(" fileformat like '%" + searchValue + "%'");
}
String individualSearch = "";
if (sArray.size() == 1) {
individualSearch = sArray.get(0);
} else if (sArray.size() > 1) {
for (int i = 0; i < sArray.size() - 1; i++) {
individualSearch += sArray.get(i) + " or ";
}
individualSearch += sArray.get(sArray.size() - 1);
}
//
recordsTotal=""+resultFilesService.getModelCount();
String searchSQL = "";
if (individualSearch != "") {
searchSQL = " where " + individualSearch;
}
searchSQL+= " order by " + orderColumn + " " + orderDir;
List<Resultfiles> resultfilesList=resultFilesService.findResultfilesList(searchSQL,start,length);
if (searchValue != "") {
recordsFiltered =""+resultFilesService.getModelCount(searchSQL);
}
else {
recordsFiltered = recordsTotal;
}
if(resultfilesList!=null)
{
...//
Map<Object, Object> info = new HashMap<Object, Object>();
info.put("data", resultfilesBeanList);
info.put("recordsTotal", recordsTotal);
info.put("recordsFiltered", recordsFiltered);
info.put("draw", draw);
JSONObject jsonstr = JSONObject.fromObject(info);
System.out.println(jsonstr.toString());
results = jsonstr.toString();
}
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(results);
response.getWriter().close();
}
이상 은 자바 웹 환경 에서 Datatables 컨트롤 의 서버 모드 를 사용 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bootstrap DateTimepicker 예제이 기사에서는 예를 들어 부트스트랩 날짜 시간 선택기를 구현하는 방법을 살펴보겠습니다. 부트스트랩 4 날짜 시간 선택기는 html, php 또는 모든 laravel 파일에서 날짜와 시간을 표시하는 데 사용됩니다. 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.