_javascript technique of paging and fuzzy query based on springmvc+bootstrap+datatables for table server

Objective

Based on springmvc+bootstrap+datatables implement data table service end page, fuzzy query (not DataTables search), page asynchronous refresh.

Description: Sp:message label is used SPRINGMVC internationalization

Effect

DataTable table

Keyword Query

Custom keyword queries, non-DataTable search

Code

HTML code

Query Criteria Code

<!--query, add, bulk Delete, export, refresh--> <div class= "Row-fluid" > <div class= "pull-right" > <div class= "Btn-group" > <button type= "button" class= "btn btn-primary btn-sm" id= "Btn-add" > <i class= "fa fa-plus" ></i> <sp:message code= "Sys.add"/> </button> <button type= "button" class= "btn, btn-primary btn-sm" id= " Btn-delall "> <i class=" fa fa-remove ></i> <sp:message code= "Sys.delall"/> </button> < Button type= "button" class= "btn btn-primary btn-sm" id= "Btn-export" > <i class= "fa fa-sign-in" ></i> < Sp:message code= "Sys.export"/> </button> <button type= "button" class= "btn btn-primary btn-sm" id= "Btn-re"
> <i class= "fa fa-refresh" ></i> <sp:message code= "Sys.refresh"/> </button> </div> </div> <div class= "Row" > <form id= "queryform" action= "<%=path%>/goodstype/list" method= "POST" > <div class= "col-xs-2" > <input type= "text" id= "keyword" name="Keyword" class= "Form-control input-sm" placeholder= "<sp:message code=" Sys.keyword "/>" > </div> < Button type= "button" class= "btn btn-primary btn-sm" id= "Btn-query" > <i class= "fa fa-search" ></i> <sp: Message code= "Sys.query"/> </button> </form> </div> </div>

Data table Code

<table id= "dataTable" class= "table table-striped table-bordered table-hover table-condensed" align= "Center" >
<thead>
<tr class= "info" >
<td><input type= "checkbox" id= "Checkall" ></td >
<th><sp:message code= "sys.no"/></th>
<th><sp:message code= " goods.type.name.cn "/></th>
<th><sp:message code=" Goods.type.name.en "/></th>"
<th><sp:message code= "Sys.create.time"/></th>
<th><sp:message code= " Sys.update.time "/></th>
<th><sp:message code= sys.oper"/></th>
</tr>
</thead>
</table>

JS Code

DataTables initialization, service-side data request, Query condition encapsulation

<!--page Script--> <script> $ (function () {//Add, modify asynchronous commit address var url = "";
var tables = $ ("#dataTable"). DataTable ({serverside:true,//paging, fetching data, and so on) to the server to processing:true,//whether or not to show "load in" when loading data
Pagelength:10,///The first load of the number of data bar ordering:false,//sorting operation on the server side, so it can be turned off. Pagingtype: "Full_numbers", Autowidth:false, statesave:true,//keep the paging state, and Comtable.fndraw (false), combined with Searching:false, Disable DataTables Search Ajax: {type: "post", url: "<%=path%>/goodstype/getdata", datasrc: "Data", Data:function (d) {VA
R param = {};
Param.draw = D.draw;
Param.start = D.start;
Param.length = D.length; var formData = $ ("#queryForm"). Serializearray ()//The data in the form is serialized into an array of Formdata.foreach (function (e) {Param[e.name] =
E.value;
});
Return param;//Customize the parameters that need to be passed. },}, Columns: [//corresponds to the sequence {"data": null, ' width ': ' 10px '}, {"Data": null}, {"Data": ' TYPENAMECN '}, {"Data": ' Thead ') Een '}, {"Data": ' Createtime ', ' Render ': function (data,type,full,callback) {return data.substr (0,19)}}, {"Data": ' UPDA Tetime ', DEFAUltcontent: "", "Render": function (Data,type,full,callback) {if (data!= null && data!= "") {return Data.substr (0
,}else{return data;} }, {"Data": null, "width": "60px"}],//action button columndefs: [{targets:0, defaultcontent: "<input type= ' checkbox ' name= ' ch Ecklist ' > '}, {targets:-1, defaultcontent: "<div class= ' Btn-group ' >" + "<button id= ' editrow ' class= ',", BTN btn- Primary btn-sm ' type= ' button ' ><i class= ' fa fa-edit ' ></i></button> ' + ' <button id= ' delrow ' Class= ' btn btn-primary btn-sm ' type= ' button ' ><i class= ' fa fa-trash-o ' ></i></button> ' + ' </div >], language: {lengthmenu: "", Processing: "<sp:message code= ' sys.load '/>", Paginate: {previous: "<", NE XT: ">", A: "<<", Last: ">>"}, Zerorecords: "<sp:message code= ' Sys.nodata '/>", info: "<sp:me Ssage code= ' sys.pages '/>, Infoempty: "", Infofiltered: "", Ssearch: "<sp:message code= ' Sys.keyword '/>:",},// be draw at each tableAfter the callback function fndrawcallback:function () {var API = This.api ();//Get the number of bars at the beginning of this page var startindex= api.context[0]._idisplaystart;
　　 Api.column (1). nodes (). each (function (cell, i) {cell.innerhtml = StartIndex + i + 1; 
});
}
});
Query button $ ("#btn-query"). On ("click", Function () {Tables.fndraw ();//query does not need to maintain paging status, back Page}); Add $ ("#btn-add"). On ("click", Function () {URL = "<%=path%>/goodstype/add"; $ ("Input[name=typeid]"). val (0); $ ("
INPUT[NAME=TYPENAMECN] "). Val (" ");
$ ("Input[name=typenameen]"). Val ("");
$ ("#editModal"). Modal ("show");
});
Bulk Delete $ ("#btn-delall"). On ("click", Function () {});
Export $ ("#btn-export"). On ("click", Function () {});
Refresh $ ("#btn-re"). On ("click", Function () {Tables.fndraw (false);/Refresh keep paging state}); CheckBox Select All $ ("#checkAll"). On ("click", Function () {if ($ (). Prop ("checked") = = True) {$ ("input[name= ' Checklist ')"
"). Prop (" Checked ", $ (this). Prop (" checked "));
$ ("#dataTable tbody tr"). AddClass (' selected '); $ (this). Hasclass (' selected ')} else {$ (' input[name= ' ChecklisT '] "). Prop (" checked ", false);
$ ("#dataTable tbody tr"). Removeclass (' selected ');
}
}); Modify $ ("#dataTable tbody"). On ("click", "#editRow", function () {var data = Tables.api (). Row ($ (this). Parents ("tr")). Data
();
$ ("Input[name=typeid]"). Val (DATA.TYPEIDSTR);
$ ("INPUT[NAME=TYPENAMECN]"). Val (DATA.TYPENAMECN);
$ ("Input[name=typenameen]"). Val (Data.typenameen);
url = "<%=path%>/goodstype/update";
$ ("#editModal"). Modal ("show");
}); $ ("#btn-submit"). On ("click", Function () {$.ajax ({cache:false, type: "POST", Url:url, data:$ ("#editForm"). Serialize () , Async:false, error:function (Request) {Showfail ("Server Connection error ...");}, Success:function (data) {if (data.st ATUs = = 1) {$ ("#editModal"). Modal ("Hide"); Showsuccess ("<sp:message code= ' sys.oper.success");/>
();
}else{showfail ("<sp:message code= ' Sys.oper.fail '/>");}
});
}); Delete $ ("#dataTable tbody"). On ("click", "#delRow", function () {var data = Tables.api (). Row ($ (this). Parents ("tr")). Data (
); if (Confirm ("Are you sure you want to delete this message?")
{$.ajax ({url: ' <%=path%>/goodstype/del/' +data.typeidstr, type: ' Delete ', DataType: ' JSON ', cache: ' false ', Success:function (data) {if (Data.status = 1) {showsuccess (' <sp:message code= ' sys.oper.success '/> '); tables.api
(). Row (). Remove (). Draw (false); }else{showfail ("<sp:message code= ' Sys.oper.fail '/>");}, Error:function (err) {showfail ("Server Connection
Error ... ");
}
});
}
});
}); </script>

Java code

Controller processing method, responsible for querying the page requires tabular data, format JSON and return.

@RequestMapping (value= "/goodstype/getdata", produces = "text/json;charset=utf-8")
@ResponseBody
Public String GetData (httpservletrequest request, querycondition query) {
datatablesview<goodstype> dataTable = Goodstypeservice.getgoodstypebycondition (query);
Datatable.setdraw (Query.getdraw ());
String data = json.tojsonstring (dataTable);
return data;
}

Returns the JSON data format

{"
data": [{
"createtime": "2016-10-27 09:42:28.0",
"typeID": 96824775296417986,
"typeidstr": " 96824775296417986 ",
" TYPENAMECN ":" Food ",
" Typenameen ":" Foods ",
" UpdateTime ":" 2016-10-28 13:00:24.0 "
},
{
"createtime": "2016-10-27 09:42:27.0",
"typeID": 96824775296417979,
"typeidstr": " 96824775296417979 ",
" TYPENAMECN ":" Car ",
" Typenameen ":" Cars123 ",
" UpdateTime ":" 2016-10-27 09:51:24.0 "
}],
" Draw ": 1,
" recordsfiltered ": $,
" recordstotal ":

Datatablesview, according to DataTables need format definition

public class Datatablesview<t> { 
private list<t> data//data and Datatales loaded "DATASRC" corresponds to 
private int Recordstotal; 
private int recordsfiltered; 
private int draw;
Public Datatablesview () { 
} public
int Getdraw () {return
draw;
}
public void Setdraw (int draw) {
This.draw = draw;
}
Public list<t> GetData () {return
data;
}
public void SetData (list<t> data) {
this.data = data;
}
public int getrecordstotal () {return
recordstotal;
}
public void setrecordstotal (int recordstotal) {
this.recordstotal = recordstotal;
this.recordsfiltered = recordstotal;
}
public int getrecordsfiltered () {return
recordsfiltered;
}
public void setrecordsfiltered (int recordsfiltered) {
this.recordsfiltered = recordsfiltered;
} 
}

Service business processing class, mainly according to the query conditions statistics record number, query the current page data list

Public datatablesview<goodstype> getgoodstypebycondition (querycondition query) {
datatablesview< goodstype> DataView = new datatablesview<goodstype> ();
Build query conditions
whereprams where = Goodstypedao.structureconditon (query);
Long count = Goodstypedao.count (where);
list<goodstype> list = Goodstypedao.list (where);
Dataview.setrecordstotal (Count.intvalue ());
Dataview.setdata (list);
return dataView;
}

The DAO layer is the basic database query operation, which omits ...

End

Query conditions here only use the keyword fuzzy query, according to business needs, you can dynamically add other query conditions, the background needs to do appropriate processing.

The above is a small set for you to introduce the implementation of Springmvc+bootstrap+datatables based on the table service end page, fuzzy query, hope to help everyone, if you have any questions welcome to my message, small series will promptly reply to everyone!