The page control of the cumulative series (JS source code)

Recently developed a paging control to share with you.

Main features and interface introduction

The Cform paging control supports service-side paging, client paging, data filtering, data sorting, and more.

SOURCE Introduction

Cform-pager paging control consists mainly of three parts: CSS, scripts and index.html,css are mainly used to control pagination and list style; Scripts is responsible for paging data crawl, pagination control, local cache, data filtering, data sorting and other functions The index.html involves a paging data template, a paging container, and the corresponding filtering, sorting buttons.

Scripts Introduction

Scripts directory below contains Cform-main, Cform-utils, Cform-cache, and related peripheral plug-ins Requirejs and jquery, we introduce each JS function.

Cform-main is the portal for the entire paging control and is responsible for invoking the paging control Cform-pager.

Cform-pager provides the main paging control functionality.

Cform-utils provides the functional functions involved in paging controls.

Cform-cache provides local paging, filtering, sorting capabilities.

In addition, the paging control uses a modular development approach, so the Requirejs is introduced, and jquery is used as a complement to the functional plugin.

Template Introduction

In addition to its own paging functionality, the Cform-pager paging control provides a paging template for developers to quickly build pagination and lists. The template provided by Cform-pager is a simple template method that fills the data by replacing the keywords inside the template by adding # #分割符来识别关键字 to the left and right sides of the field you want to replace.

To give a "chestnut" son:

For example, the data format returned by our backend data is this:

{data: [{id:1, Name: "Zhang San", age:27}, {id:1, Name: "John Doe", age:28}, {id:1, Name: "Harry", age:29}], rowscount:3}

And our list template is like this

 <TR>    <TD># #id # #</TD>    <TD># #name # #</TD>    <TD># #age # #</TD> </TR>

So the result of the final rendering is this:

 <TR>    <TD>1</TD>    <TD>Tom</TD>    <TD>27</TD>    <TD>2</TD>    <TD>John doe</TD>    <TD>28</TD>    <TD>3</TD>    <TD>Harry</TD>    <TD>29</TD> </TR>

Well, this is the most basic template, and of course we can allow you to have enough imagination to do the work you have.

Give me a "chestnut" son:

For example, now that you need to add a hyperlink to your name and link to the details page of the current person, how do you define the template?

In fact, we can do this in the following ways:

 <TR>    <TD># #id # #</TD>    <TD><ahref= "/user?id=# #id # #"># #name # #</a></TD>    <TD># #age # #</TD> </TR>

Did you see it clearly? Isn't it simple? OK, in fact, we do not need a very complex template technology, using Cform-pager can complete a lot of basic list page construction.

Do you think there are other features that can be extended? Of course, for example, we can add styles to the TD to identify different types of names, or you can implement business functions by binding events to TD. Once again I don't give more chestnuts ~

Finally, what if you find that no matter how you extend the current template, you can't finish your work? Yes, yes, we have a big recruit.

What is this big trick?

Omit 10,000 lines here ...

Is callback, yes, is the callback function, the final cform can use the callback function, the data you need through the callback function to return to you, let you handle, is not very cool ~ ~ ~

Calling methods

Cform-pager invocation is very simple, only need to introduce cform-pager this component through REQUIRESJS.

require.config ({paths: {jquery:"Jquery-1.7.1.min"}}); Require (["jquery", "Cform-pager"],function($, pager) {//Call Cform-pager    varobj =NewPager ({pager: "#pager", Container: "#table", url: "Data/product.json", Pagesize:12, UseCache:true }); //Filter data with product name Geitost$ ("#filter1"). Click (function() {Obj.filter ({filter: {ProductName:"Geitost" } });    }); //Filter data with product name Konbu$ ("#filter2"). Click (function() {Obj.filter ({filter: {ProductName:"Konbu" } });    }); //Order by Product ID$ ("#order1"). Click (function() {Obj.filter ({order: {ProductID:"ASC" } });    }); //Sort by Product ID in reverse order$ ("#order2"). Click (function() {Obj.filter ({order: {ProductID:"Desc" } }); });});

Parameter description

name	English	Default Value	Notes	Required
Obj	Paging container		Object can be a class or ID	Yes
Container	Object Container		Object must be an ID	Yes
wr.	Fetch number Address		Required parameter, tangent return value must be in JSON format	Yes
Callback	callback function	Default callback function to load data through an external template	Optional parameters for processing and rendering the returned paging data	No
PageIndex	Start Page	1	Optional parameter, default value is 1	No
PageSize	Paging size	30	Optional parameter, default value is 30	No
Params	Extended parameters		Optional parameters, when requesting a paging URL, are submitted to the server together	No
Align	Paging location	Center	Optional parameters, setting paging location: Left, center, right	No
Showloading	Whether to show loading	True	Optional parameter, default is display loading	No
Rowscount	Total Record Count	-1	Optional parameters, the total number of records queried, 1 indicates the need for server-side generation Rowscount	No
UseCache	Enable local paging	False	Optional parameters, whether local paging is enabled	No

Demos and Downloads

View Demo Demo Download

Welcome to: Cform Official Website: http://www.cform.cn Demo Address: http://demo.cform.cn (user name: 001 password 123)

Welcome to: Cform Open Source Component: http://www.cform.cn/SinglePage?t=0103

Page control of the cumulative series (JS source)