jquery easyui paging tutorial examples

In web development, we often encounter the need for paging. If we rely on hand-written code, there may be a lot of code and the style will not look good. Here is an introduction to jquery easyui Paging function, which is very convenient and simple

Then after including the necessary files according to the "jquery EasyUI Framework Usage Document", just insert the following code in $(function(){ });:

 $('#pp').pagination(options);

Let’s introduce Pagination For specific usage, first look at the attributes:

Attribute name type description default value

total number Set the total number of records when paging is established 1

pageSize number per page The number displayed 10

pageNumber Number When paging is established, the number of pages displayed 1

pageList array Users can modify the size of each page, the

pageList attribute defines how many The size can be changed. [10,20,30,50]

loading Boolean defines whether the data is loading false

buttons array defines custom buttons, each button contains two attributes:

iconCls: CSS class for displaying background image

handler: handler function when a button is clicked null

showPageList Boolean defines whether to display the page list true

showRefresh Boolean defines whether to display the refresh button true

beforePageText string in the label displayed before the input box groupPage

afterPageText string in The label of {pages}

displayMsg string displayed after the input box component displays the information of a page.

Displaying {from} to {to} of {total} items Event Event Name Parameter Description onSelectPage pageNumber, pageSize Triggered when the user selects a new page, Callback function contains two parameters: pageNumber: the number of pages of the new page pageSize: the size of the new page onBeforeRefresh pageNumber, pageSize is triggered before the refresh button is clicked, if false is returned, the refresh operation is canceled onRefresh pageNumber, pageSize is triggered after refreshing onChangePageSize pageSize is triggered when the page size is changed Demo

1. Data extraction and display.

DataGrid obtains data through the url attribute. For example: url:'ListInfo.action', in this way, the data is obtained by calling the method in Action. What is returned is a JSON string. Note that JSON strings must be assembled according to the data format defined by DataGrid. For this data format, you can refer to the attachment in my previous article. It is particularly emphasized that the value of the total field in the JSON string is the number of data items, which is used for data paging.

2. Data paging.

Data paging is divided into foreground paging and background paging. Foreground paging, DataGrid has been encapsulated. DataGrid defines two parameters: rows (number of items per page) and page (current page number). These two parameters correspond to the attributes pageSize and pageNumber respectively. The user can set it in the pageSize and pageNumber attributes, or not set it, so the default value is used. We only need to define two variables in Action, private int rows; private int page; and then obtain the required values ​​through SQL statements. The paging SQL statement (Oracle) is as follows:

Assign the number of extracted data to the total field, assemble it and return it in a JSON string, and you can achieve paging. Of course, pagination:true, is certainly required.

3. Data operations.

Data operations can be roughly divided into: viewing and deleting. For viewing, we can achieve this through onClickRow or onDblClickRow events. For example:

$(function(){

$('#test').datagrid({

title:'数据列表',

width:900,

height:500,

.......(省略的属性)

onDblClickRow: function() {

var selected = $('#test').datagrid('getSelected');

if (selected){

window.open("DataView.action?Id="+selected.ID);

}}

You can view it by double-clicking it.

Regarding deletion, you can click the delete button and call the delete method. The delete button can be assigned to the OPERATION field when assembling the JSON string. By setting {field:'OPERATION', title: 'Operation', width: 120}, the delete button can be displayed on the page. The implementation of deletion is as follows:

function DelAff(){

$.messager.confirm('确认','是否真的删除?',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     

);

}

In this way, both page deletion and database deletion are realized.

4. Problems to be solved

If the returned data is empty, there will be a bug in the page under IE browser. My solution is to set each field to "", so that a row of empty content data will appear on the page. If you have encountered this problem and solved it, please give me some advice.

The above is the detailed content of jquery easyui paging tutorial examples. For more information, please follow other related articles on the PHP Chinese website!