JQUERY Easyui Paging (pagination) usage

In web development, often encounter paging requirements, if by our handwritten code, may be more code, the style is not good-looking, the following describes the jquery Easyui paging function, very convenient and simple, the following look at the effect of the map: HTML code

Then follow the "JQuery Easyui Framework use document" to include the necessary files, as long as the $ (function () {}) is included; Insert the following code: $ (' #pp '). pagination (options); The following describes the specific use of pagination, first of all look at attributes: attribute name type description Default value Total number when the page is established, set records of the overall number of 1 pageSize number of the number of each page is pagenumber number when the page is established, the pages displayed 1 p Agelist array users can modify the size of each page, and the PageList attribute defines how many sizes can be changed. [10,20,30,50] Loading Boolean defines whether the data is loading false buttons array defines custom buttons, each containing two properties: Iconcls: CSS class that displays a background image handler: The handler function null when a button is clicked Showpagelist Boolean defines whether to display the page list true Showrefresh Boolean definition shows the Refresh button true beforepagetext the label page Afterpagetext string displayed before the input box component in the input Box component is displayed after the label of the {pages} displaymsg string displays a page of information. displaying {from} to {to} of the {total} items event Name parameter describes Onselectpage pagenumber, which is triggered when the user selects a new page, and the callback function contains two parameters: Pagenumb ER: The number of pages in the new page pageSize: The size of the new page Onbeforerefresh pagenumber, the PageSize refresh button is clicked before the trigger, if returned false cancel the refresh operation Onrefresh PageNumber, PageSize refresh triggers Onchangepagesize pageSize the demo when the page size is changed

1. Data extraction and display.

The DataGrid obtains data through the URL property. For example: url: ' listinfo.action ', which gets the data by invoking the method in the action. Returns a JSON string. Note that the JSON string must be assembled according to the data format defined by the DataGrid. This data format can refer to the attachment in the previous article. It is particularly emphasized that the value of the total field in the JSON string is the number of bars of data used for paging the data.

2. Pagination of data.

Data pagination is divided into front page and background paging, the front page, the DataGrid has been encapsulated well. The DataGrid defines two parameters: rows (the number of bars per page), page (current pages), which correspond to the property pagesize,pagenumber respectively. The user can set or not set in the Pagesize,pagenumber property, so that the default value is taken. We simply define two variables in the action, private int rows; private int page; It then gets the value that needs to be fetched through the SQL statement.     The paging SQL statement (Oracle) is as follows: SELECT * FROM (select RowNum R, field1,field2 from table_name where rownum <= page* rows () where r > (page-1) * rows

This extracts the number of values assigned to the total field, assembled in the JSON string returned, you can implement pagination. Of course, pagination:true, of course, is needed.

3. Operation of the data.

The operation of the data can be roughly divided into: view, delete. For viewing, we can implement it through Onclickrow or Ondblclickrow events. Such as:

$ (function () {
$ (' #test '). DataGrid ({
Title: ' Data List ',
width:900,
HEIGHT:500,

....... (omitted attribute)

Ondblclickrow:function () {
var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {
window.open ("Dataview.action?") Id= "+selected.id);
You can double-click it to see it.

For deletion, you can click the Delete button to invoke the Delete method to implement it. The Delete button can be assigned to the OPERATION field when the JSON string is assembled, so you can display the Delete button on the page by setting {field: ' OPERATION ', title: ' Action ', width:120}. The implementation of the deletion, as follows:

function Delaff () {
$.messager.confirm (' Confirm ', ' Is it really deleted? ', function (r) {
if (r) {
var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {
var index = $ (' #test '). DataGrid (' Getrowindex ', selected);
$ (' #test '). DataGrid (' DeleteRow ', index);
Deletesubmit (selected);
}
}
});
}
function Deletesubmit (selected)
{
var url= "Datadelete.action?" Id= "+selected.id;
$.post (
Url
);
The deletion of the page and the deletion in the database are implemented.

4. Issues to be resolved

If the returned data is empty, the page will have a bug in IE browser. My solution is to set each domain to "" so that there is a line of blank data on the page. If you encounter this problem and solve a friend, you can give me advice.