JQuery-based implementation of simple paging controls _ jquery

The paging control needs to send a request to the backend. The parameters sent include the current page, the quantity displayed on each page, and the query conditions. The retrieved data is loaded to the current page. 1:

2: Material

3: Encoding
3.1 Thoughts
What do I need to do?
1: The paging control needs to send a request to the background. The parameters sent include the current page, the number displayed on each page, and the query conditions. The retrieved data is loaded to the current page;
2: Remember the current page when performing the modification and deletion operation;
3: When querying and turning pages, you can remember the current query conditions.

3.2 Implementation
HTML

The Code is as follows:

JQuery
To make our controls usable, we write them as plug-ins. First, we build a framework and name the plug-in simplePage.

The Code is as follows:

(Function ($ ){
$. Fn. simplePage = function (o ){
Var options = {
// Configure Parameters
};
Return // something
}
}) (JQuery)

What are the default parameters?
Because the current page needs to be sent and the number displayed per page is required, two basic parameters, currentPage and pageSize, are required;
To query the table content, you need a form with the query conditions;
Because you need to modify and delete and remember the current page, a flag is required to indicate the operation type currently in progress;
To make our program more flexible, add the iner to be loaded after obtaining data, and add pager to be loaded by the paging control,
The details are as follows:

The Code is as follows:

Var options = {
Pager: '. pager', // container of the Table Control
Container: '. tabledata', // container for storing table data
Form: '# Form', // form for placing query Conditions
PageForm: '# pageForm', // place the hidden Div
Url: '', // the address at which the request is sent
CurrentPage: 1,
PageSize: 2
Type: null, // Optional: action,
PageShow: 7
}

To facilitate maintenance, we declare an independent object to obtain data and bind events. We name this function $. page.

The Code is as follows:

$. Page = {
//
SetPage: function (o ){
},
// Obtain the current page
GetCurrentPage: function (o ){
},
// Obtain the number of entries displayed on each page
GetPageSize: function (o ){
},
// Generate the json data required for sending
GenData: function (o ){
},
// Send data
LoadData: function (o ){
}
}

Implement the above declared functions. When the page is loaded for the first time, we need to obtain the total number of pages from the server to generate the page control. Therefore, the loadData function is implemented first.

The Code is as follows:

LoadData: function (o ){
Var that = this;
Var data = that. genData (o );
$. Ajax ({
Url: o. url,
Data: data,
Type: 'post ',
DataType: 'html ',
Cache: false,
Success: function (result ){
Var res = (result).find('tbody').html ();
Var totalPage = $ (result). find ('# totalPage'). val ();
Var currentPage = $ (result). find ('# currentpage'). val ();
O. currentPage = currentPage;
O. pager. empty ();
$. Line. setLine (totalPage, o); // call the function that generates the paging Control
},
Error: function (){
Alert ("error ");
}
})
}

The function $. line. setLine for generating the paging control is implemented below.

The Code is as follows:

$. Line = {
SetLine: function (totalPage, o ){
For (var I = 0; I Var a=(('your .html (''+ (I + 1) +''). addClass ('pagea '). bind ('click', function (){
Var s = $ (this );
S. siblings (). removeClass ('pageactive ');
S. addClass ('pageactive ');
O. currentPage = s. text ();
$. Page. loadData (o );
});
If (o. currentPage = I + 1 ){
A. addClass ('pageactive ');
}
O. pager. append ();
}
Var limit = this. getLimit (o, totalPage );
Var aPage = o. pager. find ('A. pageA '). not ('A. previous, a. nextAll, a. record ');
APage. hide ();
APage. slice (limit. start, limit. end). show ();
Var prev1_values (''your .html ('previous page'). addClass ('pagea previous '). unbind ('click'). bind ('click', function (){
Var pageActive = o. pager. find ('A. pageactive ');
Var s = $ (this );
If (pageActive. prev (). text () = 'previous page '){
Alert ('is already the first page! ');
Return false;
}
PageActive. removeClass ('pageactive ');
PageActive. prev (). addClass ('pageactive ');
O. currentPage = pageActive. prev (). text ();
$. Page. loadData (o );
});
Var next00000000('{.html ('Next page'). addClass ('pagea nextall'). unbind ('click'). bind ('click', function (){
Var pageActive = o. pager. find ('A. pageactive ');
Var s = $ (this );
If (pageActive. next (). text () = 'Next page '){
Alert ('is the last page! ');
Return false;
}
PageActive. removeClass ('pageactive ');
PageActive. next (). addClass ('pageactive ');
O. currentPage = pageActive. next (). text ();
$. Page. loadData (o );
});
Var pageActiveText = o. pager. find ('A. pageactive'). text ();
Var recordactivetext + '/' + totalPage + ''). addClass ('pagea record ');
O. pager. prepend (prev). prepend (record). append (next );
}
}

In the code above, we added the pageActive class to the current page, so now we can implement the getCurrentPage function of $. page, which is very simple.

The Code is as follows:

GetcurrentPage: function (o ){
Var p = o. pager. find ("a. pageActive"). text ();
Return p;
}

Then we implement the genData function for generating json data. The json format is {key: value, key: value}

The Code is as follows:

GenData: function (o ){
Var sdata = $. extend ({}, {"currentPage": o. currentPage,
"PageSize": o. pageSize}, $. jsonObj (o. pageForm ));
Return sdata;
},

The above $. jsonObj is a custom function. In order to generate the json format we need to send the query data, only input, select

The Code is as follows:

$. JsonObj = function (form ){
// Determine whether there is any serialized stuff
If (! Certificate (form).html () | certificate (form).html () = null | pai.trim((form).html () = ""){
Return null;
}
Var formEl = $ (form). find ('input [type = "text"] ');
Var formselect = $ (form). find ('select ');
Var json = "{";
For (var I = 0; I <formEl. length-1; I ++ ){
Var name = formEl. eq (I). attr ('name ');
Var val = "'" + formEl. eq (I). val () + "'";
Json + = name;
Json + = ":";
Json + = val;
Json + = ",";
}
Var lname = formEl. eq (formEl. length-1). attr ('name ');
Var lval = "'" + formEl. eq (formEl. length-1). val () + "'";
Json + = lname;
Json + = ":";
Json + = lval;
If (formselect ){
Json + = ",";
For (var I = 0; I <formselect. length-1; I ++ ){
Var name = formselect. eq (I). attr ('name ');
Var val = "'" + formselect. eq (I). val () + "'";
Json + = name;
Json + = ":";
Json + = val;
Json + = ",";
}
Var lname = formselect. eq (formselect. length-1). attr ('name ');
Var lval = "'" + formselect. eq (formselect. length-1). val () + "'";
Json + = lname;
Json + = ":";
Json + = lval;
}
Json + = "}";
Var jsonObj = eval ("(" + json + ")")
Return jsonObj;
}

Then we bind events to the buttons for the query form, and we extend our $. page function.

The Code is as follows:

HandleQueryLine: function (o ){
$ (O. form). find (". query"). click (function (){
// $ (O. pageForm). append ($ (o. form). clone (true ));
$ (O. pageForm). empty ();
$ (O. form). find ('input [type = "text"] '). each (function (){
Var vals = $ (this). val ();
Var s = $ (this). clone (). val (vals );
$ (O. pageForm). append (s );
});
$ (O. form). find ('select'). each (function (){
Var vals = $ (this). val ();
Var s = $ (this). clone (). val (vals );
$ (O. pageForm). append (s );
});
$. Page. query (o );
});
}

OK. The basic function has been completed. The following describes the main function.

The Code is as follows:

$. Fn. simplePage = function (OS ){
Var options = {
Pager: '. pager', // container of the Table Control
Container: '. tabledata', // container for storing table data
Form: '# Form', // form for placing query Conditions
PageForm: '# pageForm', // place the hidden Div
Url: '', // the address at which the request is sent
CurrentPage: 1,
PageSize: 2,
Type: null, // Optional: action,
PageShow: 7 //,
};
Var o = $. extend (options, OS );
Return this. each (function (){
O. pager = $ (this). find (o. pager );
O. container = $ (this). find (o. container );
// First clear the click Event
O. pager. unbind ('click ');
If (o. type = 'action '){
// Specifies the action, such as the event at the time of deletion. In this case, you need to refresh the data on the current page.
O. currentPage = $. page. getPageSize (o );
O. pageSize = $. page. getCurrentPage (o );
$. Page. loadData (o );
Return;
}
$. Page. loadData (o );
$. Line. handleQueryLine (o );
})
}

Now our paging is not very nice. We use firebug to view the generated paging structure and write the following style:

The Code is as follows:

. Pager {
Display: block;
Float: left;
Width: 16px;
Height: 16px;
Margin: 5px;
}
. Pager a. pageA {
Background: url ("../images/grid/page.png") no-repeat left 0px transparent;
Display: inline-block;
Font-size: 14px;
Margin: 0 3px;
Padding-left: 6px;
Text-align: center;
Vertical-align: bottom;
Height: auto;
Width: auto;
Cursor: pointer;
}
. Pager a. pageA span {
Background: url ("../images/grid/page.png") no-repeat right 0px transparent;
Display: inline-block;
Height: 24px;
Line-height: 22px;
Padding-right: 6px;
}
. Pager a. pageActive {
Background: url ("../images/grid/page.png") no-repeat left-24px transparent;
}

Success !!

Download DEMO