EasyUI DataGrid and Pagination, easyuipagination

EasyUI DataGrid and Pagination, easyuipagination

Next to EasyUI project-driven Learning

Data Table in DataGrid and Pagination page

1. Create a DataGrid using the <table> tag and nest the <th> label definition list

<Table id = "dg" class = "easyui-datagrid"> <thead> <tr> <th data-options = "field: 'ck ', checkbox: true "> </th> <th data-options =" field: 'username', width: 100 "> name </th> <th data-options =" field: 'orgname', width: 100 "> Organization </th> <th data-options =" field: 'state', width: 100 "> Status </th> <th data-options =" field: 'loginname', width: 100 "> login name </th> <th data-options =" field: 'ctime', width: 100 "> creation time </th> </tr> </thead> </table> <! -- Pagination bar --> <div id = "dom_var_pagination" class = "easyui-pagination"> </div>

Ii. Loading data tables

$ ("# Dg "). datagrid ({url: 'getuseraction. action ', closable: true, checkOnSelect: true, striped: true, rownumbers: true, 'toolbar': '', fitColumns: true, loadFilter: function (data) {var data _ = {"rows": data. resultList, // row data "total": data. totalSize // total number of records} $ ("# dom_var_pagination "). pagination ({total: data. totalSize}); return data _;}});

Data. resultList is the JSON format data returned by the background.

For example: [{id = 1, loginname = zhangsan, username = zhangsan, state = available, ctime = 2014-01-01}]

Then this background code will not be described, you can download the Demo code: http://download.csdn.net/detail/itmyhome/7609373

3. Paging

$("#dom_var_pagination").pagination( {onSelectPage: function(pageNumber, pageSize){     $('#dg').datagrid('load',{   pagesize: pageSize,   currentPage: pageNumber    });}});

Effect:

Project source code download: http://download.csdn.net/detail/itmyhome/7609373

Reprinted please indicate the source: http://blog.csdn.net/itmyhome1990/article/details/37563551

How to change English to Chinese on jquery easyui datagrid page?

Okay, I am also studying this. I have solved this problem. The number of pages in front of the page, and the number of pages and of cannot be changed. This string of text can be changed later. It mainly describes the number of data entries to the number of data entries, and the total number of data entries. The English string is used by default, if you want to change it to what you need, see the following code:

$ ('# Tt'). datagrid ('getpager'). pagination ({// text display below the paging bar
DisplayMsg: 'currently, {total} records are displayed from {from} to {',
OnBeforeRefresh: function (pageNumber, pageSize ){
$ (This). pagination ('loading ');
Alert ('pagenumber: '+ pageNumber +', pageSize: '+ pageSize );
$ (This). pagination ('loaded ');
}
});
Tt is the id of your table. You can add this sentence to $ ('# tt'). datagrid.

How can I solve the problem of garbled code in pagination pages using easyui datagrid?

1. pagination is defined in js or html (jsp. It may be that the encoding format of the file is incorrect with that of the html header page.

2. Is the Javascript file you defined incorrectly encoded or garbled characters already exist?

Hope to help you