EasyUI learning notes --- Datagrid real paging data query, easyui --- datagrid

EasyUI learning notes --- Datagrid real paging data query, easyui --- datagrid

In my opinion, the EasyUI Datagrid component is still very powerful. I encountered a paging request problem during my use, which had been solved for one day. Next I will share my problems.

// Datagrid data table Rendering

$ ("# Dg"). datagrid ({
Loader: function (param, success, error ){
Var pageNumber = param. page;
Var pageSize = param. rows;
$. Ajax ({
Type: "get ",
Url: url,
DataType: 'jsonp ',
Data: "pageNum =" + pageNumber + "& pageSize =" + pageSize,
Success: function (data ){
If (data. code = 0 ){
Var arr = data. result. content;
$ ("# Dg"). datagrid ('loaddata', {total: data. result. page. totalRecord, rows: arr })
}
},
Error: function (){
Error. apply (this, arguments );
}
});
}
})

 

The input parameters include param, success, and error. Optional.

Here I mainly use param And param has param. page (page number) and param. rows (number of lines displayed on each page) has two attributes. this parameter is required because the page is to be queried after loading;

The first problem I encountered was cross-origin. I will not go into details here if I have mentioned this in my previous article;

The second step is how to render the data returned by the request to the table. Because it is a real page, the data queried each time is only the data on the current page, not all data, however, the total number of data displayed in the footer must be all data.

Finally, we found that the loadData method can input a json data $ ("# dg "). datagrid ('loaddata', {total: data. result. page. totalRecord, rows: arr }).

3. Because I have enabled the loadMsg attribute, the status of loading is displayed when the background data is requested, but the status is not hidden after the request is successful.

OnLoadSuccess: function (data ){
// If the query is successful, the loading status is hidden.
$ (This). datagrid ("loaded ");
}

Hide the loading status after successful data loading

4. Click the next page to query

// Click the next page
$ ('# Dg'). datagrid ('getpager'). pagination ({
// The operation executed by the refresh button
OnBeforeRefresh: function (){},
OnSelectPage: function (pageNumber, pageSize ){
$ ("# Dg"). datagrid ('loading'); // display the loading information
$. Ajax ({
Type: "get ",
Url: url,
DataType: 'jsonp ',
Data: "pageNum =" + pageNumber + "& pageSize =" + pageSize,
Success: function (data ){
If (data. code = 0 ){
// Fill in the table after the data is returned successfully
Var arr = data. result. content;
$ ("# Dg"). datagrid ('loaddata', {total: data. result. page. totalRecord, rows: arr })
}
},
Error: function (){
Error. apply (this, arguments );
}
})
}
});