Objective:
1, DataTables paging and query the database page is independent, not affect each other, simply say, you background code how to page, DataTables is not concerned about.
2, DataTables said, when paging, you click on any paging properties, such as the first page, the previous, next page or page number, I send you some data to the background,
After you received the data backstage is not my control, but, you returned to me in the data, I have to get some data, as long as you give me the data accurate, I generated the paging is accurate,
You don't have to worry about the rest.
3, Pagehelper said, when paging, I just need to know you want to query the current page number of data and the number of data you want to show each page, the rest are left to me, do not need to help you to worry about.
OK, since 2 guys have said, nothing needs us to worry about, then we are concerned about a few problems:
DataTables to backstage what data, how do we receive.
After receiving, how to deal with the pagehelper.
What we need to do: according to my own thinking, what to think about what to say, some of the places of attention will also be mentioned in the said time.
1, how to set up DataTables to open the background paging.
Set several properties, mainly the first 2 set to True
serverside:true,//Turn on Server mode: Enable server paging
paging:true,//whether paging
Pagingtype: "Full_numbers",//In addition to the first page, Prev, Next, last four buttons and page buttons
2, DataTables to the background to pass what things.
First of all, let me remind you that the naming of parameters is different between 1.9x and 1.10 and later versions. Don't be misled by the old information on the Internet, pay attention to your version.
I am here to follow the 1.10.0 configuration.
DataTables's properties are no more authoritative than their own APIs.
Reference: Server processing (server-side processing) section
Http://datatables.club/manual/server-side.html
The API says that DT will pass a lot of data to the background, but we are more concerned about:
Draw,start,length,search. Just a few.
3, DataTables to get what data will be paged.
Ditto, look at the API, the necessary parameters, it is necessary to have:
Draw,recordstotal,recordsfiltered,data.
Under Description:
Draw: What is it to you, what are you returning?
Recordstotal: Total number of bars
Recordsfiltered: After the total number of filtered (this I did not understand what to do, I returned is also received, return intact.) If you know, you can leave a message and tell me.
Data: Statistics. (Notice here, data this name is the default, we encapsulate the data, can be modified, this time we need to configure the attribute datasrc: "List",//This parameter is their encapsulated JSON inside the key)
4, backstage how to receive.
Get it directly with request: It is best to encapsulate
The number of data rows started
String start = Request.getparameter ("start");
Number of data per page
String length = request.getparameter ("Length");
DT-transitive draw:
String draw = Request.getparameter ("Draw");
5, return to DataTables, I return here is the JSON data
Fragment:
Encapsulating data to DataTables
Datatable.setdraw (Datatable.getdraw ());
Datatable.setdata (Pageinfo.getlist ());
Datatable.setrecordstotal ((int) pageinfo.gettotal ());
Datatable.setrecordsfiltered (Datatable.getrecordstotal ());
Returns data to the page
jsonobject jsonobject = Jsonobject.fromobject (dataTable);
6, Pagehelper said, you have mentioned the background pagination, how also must say me.
Give me the current page number and the data on each page, I'll give you the query data
Want the page number, OK, calculate to you:
Instead of getting start and length, calculate
Calculate page Numbers
This.page_num = (Integer.parseint (start)/integer.parseint (length)) + 1;
OK, pass the page number and length to pagehelper, paging complete.
The above is the description, there is the wrong place also please correct me. Here's the code:
DataTables:
Initialize Table
var otable = $ ("#data_table")
. DataTable (
{
ajax: {
URL: "Your own url",
type: "POST",
//datasrc: "List",//) This parameter is the key in your own encapsulated JSON
data: {
//args1: "I am the value of a fixed pass parameter, the server receives the parameters [ARGS1]"
}
},
serverside:true,//turn on server mode: Enable server paging
lengthchange:false,//whether the user is allowed to change the number of records displayed per page
ordering:false,//whether the user is allowed to sort
paging:true,//whether paging
Pagingtype : "Full_numbers",//In addition to the first, Prev, Next, last four buttons and page buttons
processing:true,//whether to show processing status/
* scrollx:true,//allow horizontal scrolling
scrolly: "200px",
scrollcollapse:true, * *
searching:false,//whether to start local search
statesave:false,//refresh is saved status c22/>autowidth:true,//Automatic calculation width
//deferrender:true,//delay rendering
columns: [{
data: ' ID '
},
// The omission of the following ...
Controller: Handle the code, reference to see the line
Use DataTables properties to receive paging data
datatablepageutil< your own bean class > dataTable = new datatablepageutil< your own Bean class > ( request);
Start paging: Pagehelper will process the next first query Pagehelper.startpage (
datatable.getpage_num (), datatable.getpage_size ());
or use List to facilitate late use
of list< your own bean class > Xxbeanlist = Xxservice.queryxxilist (your own bean class);
Wrap the results in PageInfo
pageinfo< your own bean class > PageInfo = new pageinfo< your own Bean class > (xxbeanlist);
Encapsulating data to DataTables
Datatable.setdraw (Datatable.getdraw ());
Datatable.setdata (Pageinfo.getlist ());
Datatable.setrecordstotal ((int) pageinfo.gettotal ());
Datatable.setrecordsfiltered (Datatable.getrecordstotal ());
Returns data to the page
jsonobject jsonobject = Jsonobject.fromobject (dataTable);
Note: Pagehelper also has a paging, is to use pageinfo<t> receive return, paste code reference
Xxserviceimpl:
pageinfo< your bean> xxbeanpageinfo = null;
Pass in your own argument
xxbeanpageinfo = pagehelper.startpage (Current page number, number of data per page). Doselectpageinfo (New iselect () {public
void Doselect () {
//query data
xxdao.queryxxlist (parameters);
}
);
Datatablepageutil: This is basically the complete code,
2 default values set themselves:
Page_num = 1;
Page_size = 10;
The public class Datatablepageutil<t> {/*------------------DT automatically requested parameter (Sent parameters) begin--------------------/* * * Draw counters. This is used to ensure that Ajax returns from the server corresponds (Ajax is asynchronous, so the order of return is indeterminate). Require the server to receive this parameter and then return * * private int draw; Number of Requests/* * First Data starting position, such as 0 for the first data/private int start = isystemconstants.page_start;//beginning/End position/* Tell the server how many bars are displayed per page,
This number is equal to the number of records in the returned data collection and may be greater than because the server may not have so much data. * This may also be-1, representing the need to return all the data (although this is a bit of a violation of server-handling Concepts) * * Private int length = Isystemconstants.page_length;
Data length * * Global search condition applies to each column (searchable need to be set to true)/private String search;
* * If TRUE indicates that the global search value is handled as a regular expression, false is not.
* Note: Usually in server mode for large data does not execute such regular expressions, but this is the decision of their own * * * Private Boolean Is_search; * * Tell the backend that those columns are to be sorted.
I is an array index, corresponding to the columns configuration of the array, starting from 0 * * Private int[] order;
* * tells the background column sort way, desc descending ASC Ascending/private String order_dir;
* * Columns binding data source, defined by Columns.dataoption.
* * Private String columns_data;
* * Columns name, defined by Columns.nameoption. * Private String COlumns_name;
* * * tag column can be searched, for true to represent can, otherwise not, this is controlled by columns.searchableoption/private String columns_searchable;
* * * Tag column can be sorted, true to represent can, otherwise not, this is controlled by columns.orderableoption/private Boolean is_orderable;
* * * Mark the search conditions for specific columns * * * private String Columns_search_value;
* * The search condition for a specific column is considered to be a regular expression, and if true means that the search value is handled as a regular expression, false is not.
* Note: Usually in server mode for large data does not execute such regular expressions, but this is the decision of their own * * * Private Boolean Is_search_regex; /*------------------DT automatically requested parameter (Sent parameters) End--------------------/*------------------server needs to return the data (returned Data) begin--------------------/* * necessary.
As mentioned above, the number of draw that the DataTables sends is how much the server returns.
* Here, note that for security reasons, the author strongly requests that this be converted to an integer that is returned after the number, rather than simply accepted and returned, in order to prevent Cross-site scripting (XSS) attacks.
*//private int draw; * * necessary.
That is, the number of records not filtered (total number of records in the database) * * private int recordstotal; * * necessary.
The number of records filtered (if there is a filter to receive the foreground, then the number of filtered records) * * * private int recordsfiltered; * * necessary. The data to display in the table. This is an array of objects, or just arrays, the difference is that the pure array foreground does not need to use columns binding data, will automatically display the * in order, and the object array needs to use columns binding data to normal display. NoteThe name of this data can be controlled by Ajaxoption's * ajax.datasrcoption/private list<t> data; * * Optional.
You can define a bug to describe the friendly prompt of the server after the problem/private String error;
/*-------------Optional parameter-----------------/* * automatically bound to the TR node/private String Dt_rowid;
* * Automatically add this class name to TR/private String Dt_rowclass;
* * Use the Jquery.data () method to bind data to a row for easy retrieval (such as adding a click event)/private Object dt_rowdata; * * Automatically bind data to TR, using the Jquery.attr () method, the object's key is used as a property, and the value is used as the value of the property.
Note that this requires DataTables * 1.10.5+ version to support the */private Object dt_rowattr;
/*-------------Optional Parameters-----------------/*------------------server needs to return the data (returned) End--------------------* *
* Current page number */private int page_num =isystemconstants.page_num;
* * * per page data/private int page_size = Isystemconstants.page_size; Public Datatablepageutil () {} public Datatablepageutil (HttpServletRequest request) {//start number of data rows String start = req
Uest.getparameter ("Start");
Number of data per page String length = request.getparameter ("Length"); DT-transitive draw:string draw = Request.getparameter ("Draw");
This.setstart (Integer.parseint (start));
This.setlength (length) (integer.parseint);
This.setdraw (Integer.parseint (draw));
Calculate page Number This.page_num = (integer.parseint (start)/integer.parseint (length)) + 1;
public int Getdraw () {return draw;
The public void Setdraw (int draw) {This.draw = draw;
public int Getstart () {return start;
public void Setstart (int start) {This.start = start;
public int GetLength () {return length;
public void SetLength (int length) {this.length = length;
Public String Getsearch () {return search;
public void Setsearch (String search) {this.search = search;
public Boolean Isis_search () {return is_search;
} public void Setis_search (Boolean is_search) {this.is_search = Is_search;
Int[] GetOrder () {return order;
public void Setorder (int[] order) {this.order = order; Public String Getorder_dir () {RETurn Order_dir;
} public void Setorder_dir (String order_dir) {this.order_dir = Order_dir;
Public String Getcolumns_data () {return columns_data;
} public void Setcolumns_data (String columns_data) {this.columns_data = Columns_data;
Public String Getcolumns_name () {return columns_name;
} public void Setcolumns_name (String columns_name) {this.columns_name = Columns_name;
Public String getcolumns_searchable () {return columns_searchable;
} public void Setcolumns_searchable (String columns_searchable) {this.columns_searchable = columns_searchable;
public Boolean isis_orderable () {return is_orderable;
} public void Setis_orderable (Boolean is_orderable) {this.is_orderable = is_orderable;
Public String Getcolumns_search_value () {return columns_search_value;
} public void Setcolumns_search_value (String columns_search_value) {this.columns_search_value = Columns_search_value; public Boolean Isis_search_regex () {return Is_search_regex;
} public void Setis_search_regex (Boolean is_search_regex) {This.is_search_regex = Is_search_regex;
public int getrecordstotal () {return recordstotal;
The public void setrecordstotal (int recordstotal) {this.recordstotal = Recordstotal;
public int getrecordsfiltered () {return recordsfiltered;
The public void setrecordsfiltered (int recordsfiltered) {this.recordsfiltered = recordsfiltered;
Public list<t> GetData () {return data;
public void SetData (list<t> data) {this.data = data;
Public String GetError () {return error;
public void SetError (String error) {this.error = error;
Public String Getdt_rowid () {return dt_rowid;
} public void Setdt_rowid (String dt_rowid) {this.dt_rowid = Dt_rowid;
Public String Getdt_rowclass () {return dt_rowclass;
} public void Setdt_rowclass (String dt_rowclass) {this.dt_rowclass = Dt_rowclass; Public Object Getdt_rowdata () {return dt_rowData;
The public void Setdt_rowdata (Object dt_rowdata) {this.dt_rowdata = Dt_rowdata;
Public Object getdt_rowattr () {return dt_rowattr;
The public void setdt_rowattr (Object dt_rowattr) {this.dt_rowattr = dt_rowattr;
public int Getpage_num () {return page_num;
The public void setpage_num (int page_num) {this.page_num = Page_num;
public int getpage_size () {return page_size;
The public void setpage_size (int page_size) {this.page_size = page_size; }
}
That's basically it.
There are queries: I use the query is passed the dynamic parameters, this can look at the API Ajax section, code reference:
Condition Query
$ (' #search_but '). On (' click ', Function () {
//parameter
var xx = $ ("#xx"). Val ();
Parameter
var xx = $ ("#xx"). Val ();
Parameter
//query condition
var param = {
"xx": xx,
"xx": xx
};
Otable.settings () [0].ajax.data = param;
OTable.ajax.reload ();
});