Home > Developer > Web Develop
Preface
For some enterprise-level applications (non-websites), the most important content on the page is the form and form. For systems like ERP, the data record is relatively large, and the paging function must be implemented when the front-end table is displayed. EasyUI provides the Pagination component.
Pagination overwrite default $. fn. pagination. defaults. pagination allows you to browse data by page. It supports configurable options, page navigation, and page length selection, in addition, you can add custom buttons on the right of the page to enhance the page function.
However, pagination depends on linkbutton, so it is necessary to understand linkbutton here.
LinkbuttonUse $. fn. linkbutton. defaults to reload the default value.
Click link to create a hyperlink. It indicates a normal <a> mark. You can display icons and text, or just icons or text. The button width can be dynamically reduced/expanded to adapt to text labels. Follow the conventions to see its attributes, events, and methods.
Attribute| Name | Type | Description | Default Value |
| Id | String | Unique ID of the component | Null |
| Disabled | Boolean | This button is disabled when it is set to true. | False |
| Toggle | Boolean | If it is set to true, you can change the button status to select or cancel the selection, starting with version 1.3.3. | False |
| Selected | Boolean | Indicates whether the status of the button is selected, starting from 1.3.3. | False |
| Group | String | Indicates which buttons are in the same group and start with 1.3.3 | Null |
| Plain | Boolean | When set to true, indirect effects are displayed. | False |
| Text | String | Text on the button | Null |
| IconCls | String | A css class with 16*16 icons is displayed on the left. | '' |
| IconAlign | String | The position displayed on the button. Optional values: left, right, top, and bottom. The value starts at 1.3.2. | Left |
| Size | String | Button size. The optional values are small and large start at 1.3.6. | Small |
Linkbutton provides an onclik event that is triggered when a button is clicked. Started at 1.3.6
Method| Name | Parameters | Description |
| Options | None | Returned property object |
| Disable | None | Disable button Instance: $ ('# Btn'). linkbutton ('disable ') |
| Enable | None | The enable button is used in a way similar to the preceding |
| Select | None | Select this button to start at 1.3.6. |
| Unselect | None | Cancel selection, starting at 1.3.6 |
Linkbutton also provides two usage methods.
1. Create with html Tag
<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>2. Create through js script
<a id="btn" href="#">easyui</a>$('#btn').linkbutton({ iconCls: 'icon-search' });The following example uses JQuery to bind and click the processing function to the link;
<Body> <a id = "btn" href = "www.baidu.com" class = "easyui-linkbutton" data-options = "iconCls: 'icon-search' "> easyui </a> <script> $ (function () {$ ('# btn '). bind ('click', function () {alert ('button clicked') ;}); </script> </body>After having a certain understanding of linkbutton, you can start to learn about pagination. Why does the value pagination depend on linkbutton, I think the main reason is that pagination provides customization of buttons on the right of the page (those buttons are linkbuttons ). I don't talk much about it, but I also started from the official website api.
Use $. fn. pagination. defaults to reload the default value.
Pagination allows you to navigate data pages. Supports the selection of configurable option pages as rows and page lengths. In addition, you can add custom buttons on the correct page to enhance the functionality.
Dependent component: linkbutton
AttributeThe paging plug-in has many attributes, including the following attributes:
| Name | Type | Description | Default Value |
| Total | Number | Total number of records. This attribute must be set when paging is created. | 1 |
| PageSize | Number | Number of records displayed per page | 10 |
| PageNumber | Number | The current page number is displayed when the page is created. | 1 |
| PageList | Array | You can flexibly change the number of records displayed on each page. Optional An example of an array is as follows: $.('#pager').pagination({ pageList:[10,20,30]}); |
|
| Loading | Boolean | Define whether data is being loaded (Reminder) | False |
| Buttons | Array, selector | Custom button, two values. 1. An array. Each button contains two attributes. IconCls: css class for displaying background images Handler: A handle function called when a button is clicked. 2. selector indicates the buttons A simple example: 1. Create with html tags: <Div class = "easyui-pagination" style = "border: 1px solid # ccc" data-options =" total: 114, buttons: [{ iconCls:'icon-add', handler:function(){alert('add')} },'-',{ iconCls:'icon-save', handler:function(){alert('save')}}]"></div>2. Create with js script: <div class="easyui-pagination" style="border:1px solid #ccc" id="pager"></div><script> $('#pager').pagination({ total: 11, buttons: [{iconCls: 'icon-add',handler: function () {alert('add')} }, '-', {iconCls: 'icon-save',handler: function () {alert('save')}}] });</script> |
Null |
| Layout | Array | Defines the layout of pagination, starting with version 1.3.5 The layout options may contain the following values: List: page size set Sep: The separator between button and finger First: the first button Prev: Previous button Next: The last button. Last: last button Refresh: refresh button Manual: the number of manual pages that can be entered. Links: Link to the page number. Simple sample code: <script>$('#pager').pagination({total: 11,buttons: [{iconCls: 'icon-add',handler: function () {alert('add')} }, '-', {iconCls: 'icon-save',handler: function () {alert('save')} }],layout:['list','sep',first','links','last']}); </script> |
|
| Links | Number | The number of links. This setting is valid only when links is defined in the layout attribute. Started at 1.3.5 | 10 |
| ShowPageList | Boolean | Determines whether to display the number of records per page that can be selected. | True |
| ShowRefresh | Boolean | Define whether to display the refresh button. | True |
| BeforePageText | String | Symbols displayed between input boxes | Page |
| AfterPageText | String | Symbol displayed after the input box | Of {pages} |
| DispalyMsg | String | Display paging information on the top right of the plug-in | Displaying {from} to {to} of {total} items |
Yes, pagination has many attributes and is complex. But we don't have to worry about it because we can flexibly customize it. Note that the last three attributes are generally not dynamic. The language js in local has been defined.
Event| Name | Attribute | Description |
| OnSelectPage | PageNumber, pageSize | The callback function is triggered when you flip pages. The callback function contains two parameters: PageNumber: page number of the next page PageSize: number of records displayed on the next page Example: |
| OnBeforeRefresh | PageNumber, pageSize | Triggered before refreshing. If false is returned, the refreshing is canceled. |
| OnRefresh | PageNumber, pageSize | Triggered after refreshing. |
| OnChangePageSize | PageSize | Triggered when the user modifies the number of records per page. |
| Name | Parameters | Description |
| Options | None | Returns the paging property object. |
| Loading | None | The reminder page plug-in is being downloaded. |
| Loaded | None | The reminder page plug-in has been downloaded. |
| Refresh | Options | Refresh and display information. 1.3 available. $ ('# Pp '). pagination ('refresh'); // refresh the information in the right column of the page $ ('# pp '). pagination ('refresh', {// modify the option and refresh the information in the right column of the page total: 114, pageNumber: 6 }); |
| Select | Page | Select a new page. The page index starts from 1. 1.3 available. $('#pp').pagination('select');// refresh the current page$('#pp').pagination('select', 2);// select the second page |
1. Create a pagination Tag:
2. Create using scripts:<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> $('#pp').pagination({ total:2000, pageSize:10 });
Demo
The pagination examples provided on the official website are customized. I will not mention them here. You can customize them flexibly based on some of the familiarity and methods in the above table. Here I think the interesting demo is still in the api.
Use ajax paging through the panel and pagination. When you select a new page, the panel displays the corresponding content of the specified page. The Code is as follows:
<Div id = "content" class = "easyui-panel" style = "height: 200px" data-options = "href: 'Show _ content. php? Page = 1' "> </div> <div class =" easyui-pagination "style =" border: 1px solid # ccc; "data-options =" total: 2000, pageSize: 10, onSelectPage: function (pageNumber, pageSize) {$ ('# content '). panel ('refresh', 'show _ content. php? Page = '+ pageNumber); refresh the page content in the panel based on the selected pageNumber} "> </div>
Well, the Learning Based on pagination is here first, and there will be a lot of visual tests in the future.
Independent site: liangtao.sinaapp.com /? P = 209
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
