Home > Developer > JavaScript
Examples of jQuery front-end pagination and jquery front-end pagination
When paging is performed, most of them return an html string of the navigation bar in the background. In fact, js is also well implemented at the front end.
Call the pager method and enter a parameter to return an html string of the navigation bar. The method is relatively simple.
Copy codeThe Code is as follows:
/**
* PageSize, number of entries displayed per page
* PageIndex, current page number
* Total pageCount pages
* Url Connection address
* Example of pager (10, 1, 5, 'index') Usage
*/
Function pager (pageSize, pageIndex, pageCount, url ){
Var intPage = 7; // Number Display
Var intBeginPage = 0; // number of start pages
Var intEndPage = 0; // The number of ending pages
Var intCrossPage = parseInt (intPage/2); // displayed number
Var strPage = "<div class = 'F'> <span class = 'pageinfo'> NO. <font color = '# FF0000'>" + pageIndex + "/" + pageCount + "</font> <font color = '# FF0000'>" + pageSize + "</font> </span> ";
If (pageIndex> 1 ){
StrPage = strPage + "<a class = 'pagenav' href = '" + url + "? PageIndex = 1 & pageSize = "+ pageSize +" '> <span> homepage </span> </a> ";
StrPage = strPage + "<a class = 'pagenav' href = '" + url + "? PageIndex = "+ (pageIndex-1) +" & pageSize = "+ pageSize +" '> <span> previous page </span> </a> ";
}
If (pageCount> intPage) {// the total number of pages is greater than the number of pages displayed on the page
If (pageIndex> pageCount-intCrossPage) {// current page number> total page number-3
IntBeginPage = pageCount-intPage + 1;
IntEndPage = pageCount;
}
Else {
If (pageIndex <= intPage-intCrossPage ){
IntBeginPage = 1;
IntEndPage = intPage;
}
Else {
IntBeginPage = pageIndex-intCrossPage;
IntEndPage = pageIndex + intCrossPage;
}
}
} Else {
IntBeginPage = 1;
IntEndPage = pageCount;
}
If (pageCount> 0 ){
For (var I = intBeginPage; I <= intEndPage; I ++ ){
{
If (I = pageIndex) {// current page
StrPage = strPage + "<a class = 'current' href = 'javascript: void (0); '>" + I + "</a> ";
}
Else {
StrPage = strPage + "<a class = 'pagenav' href = '" + url + "? PageIndex = "+ I +" & pageSize = "+ pageSize +" 'title = 'quarter "+ I +" page'> "+ I +" </a> ";
}
}
}
}
If (pageIndex <pageCount ){
StrPage = strPage + "<a class = 'pagenav' href = '" + url + "? PageIndex = "+ (pageIndex + 1) +" & pageSize = "+ pageSize +" '> <span> next page </span> </a> ";
StrPage = strPage + "<a class = 'pagenav' href = '" + url + "? PageIndex = "+ pageCount +" & pageSize = "+ pageSize +" '> <span> last page </span> </a> ";
}
Return strPage + "</div> ";
}
Try this method
Copy code
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Script src = "Script/ajax-pager.js"> </script>
<Script src = "Script/jquery-1.8.0.js"> </script>
<Script type = "text/javascript">
$ (Function (){
LoadData (1, 10 );
// Click an event by PAGE
$ (Document. body). on ('click', '. pageNav', function (){
Var pageSize = Number (getQueryString ('pagesize', $ (this). attr ('href ')));
Var pageIndex = Number (getQueryString ('pageindex', $ (this). attr ('href ')));
LoadData (pageIndex, pageSize );
Return false; // do not jump to the page
});
});
// Load data
Function loadData (pageIndex, pageSize ){
$. GetJSON ('content/mermersdata.txt ', {pageIndex: pageIndex, pageSize: pageSize}, function (data ){
Var beginIndex = (pageIndex-1) * pageSize;
Var endIndex = pageIndex * pageSize-1;
Var tbodyHtml = '';
For (var I = beginIndex; I <endIndex; I ++ ){
If (! Data. Rows [I]) {
Break;
}
Var tbody = '<tr> <td> {0} </td> <td >{1} </td> <td >{2} </td> <td> {3} </td> <td >{4} </td> <td >{5} </td> ';
Tbody + = '<td >{6} </td> <td >{7} </td> <td >{8} </td> <td >{9} </td> <td >{10} </td> </tr> ';
Tbody = tbody. format (data. Rows [I]. CustomerID, data. Rows [I]. CompanyName, data. Rows [I]. ContactName,
Data. Rows [I]. ContactTitle, data. Rows [I]. Address, data. Rows [I]. City,
Data. Rows [I]. Region? Data. Rows [I]. Region: '', data. Rows [I]. PostalCode, data. Rows [I]. Country,
Data. Rows [I]. Phone, data. Rows [I]. Fax? Data. Rows [I]. Fax :'');
TbodyHtml + = tbody;
}
('{Tb'}.find('tbody'}.first().html (tbodyHtml );
Var pageCount = parseInt (data. Total/pageSize) + (data. Total % pageSize? 1: 0 );
('{Dvpager'{.html (pager (pageSize, pageIndex, pageCount, 'mermersdata.txt '));
}
);
}
// String formatting
String. prototype. format = function (args ){
Var result = this;
Var reg;
If (arguments. length> 0 ){
If (arguments. length = 1 & typeof (args) = "object "){
For (var key in args ){
If (args [key]! = Undefined ){
Reg = new RegExp ("({" + key + "})", "g ");
Result = result. replace (reg, args [key]);
}
}
} Else {
For (var I = 0; I <arguments. length; I ++ ){
If (arguments [I]! = Undefined ){
Reg = new RegExp ("({)" + I + "(})", "g ");
Result = result. replace (reg, arguments [I]);
}
}
}
}
Return result;
};
// Obtain url parameters
Function getQueryString (name, url ){
Var reg = new RegExp ("(^ | &)" + name + "= ([^ &] *) (& | $)", "I ");
Url = url & url. indexOf ('? ')> = 0? Url. substring (url. indexOf ('? '), Url. length): window. location. search;
Var r = url. substr (1). match (reg );
If (r! = Null) return unescape (r [2]); return null;
}
</Script>
</Head>
<Body>
<Table id = "tb" border = "1" cellpadding = "0" cellspacing = "0">
<Thead>
<Tr>
<Th width = "90px;"> CustomerID </th>
<Th width = "240px;"> CompanyName </th>
<Th width = "130px;"> ContactName </th>
<Th width = "140px;"> ContactTitle </th>
<Th width = "205px;"> Address </th>
<Th width = "90px;"> City </th>
<Th width = "50px;"> Region </th>
<Th width = "80px;"> PostalCode </th>
<Th width = "80px;"> Country </th>
<Th width = "95px;"> Phone </th>
<Th width = "95px;"> Fax </th>
</Tr>
</Thead>
<Tbody> </tbody>
</Table>
<Div id = "dvPager"> </div>
</Body>
</Html>
[/Code]
View the effect
There are a lot of columns. I only have some of them. The interface is ugly. Add some styles and use bootstrap to beautify them.
Install bootstrap using Nuget
After adding the style
Although it is not very beautiful, it is worthy of the audience.
Code download https://github.com/dengjianjun/JsPager
If it is helpful to you, please give me a thumbs up. Thank you!
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
