I've done a project recently , Useful to Pagination , This kind of plug-in should be very common , Although there are many ready-made paging plug-ins on the Internet , But I still want to write one myself , Accumulate something for yourself , Practice by the way , It's almost 3 In hours or so , The code is as follows :

Code :

 <!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Paging plug-ins </title>
<style type="text/css">
body{padding: 0px; margin: 0px;}
.content{width: 980px; margin: 0 auto; padding-top: 50px;}
ul{margin:0px; padding:0px;}
ul li{margin:0px; padding:0px; list-style:none; float:left;}
</style>
</head>
<body>
<div class="content">
<p> The current page : <input type="text" id="txtPageIndex" /></p>
<p> Total number of pages : <input type="text" id="txtPageCount" /></p>
<p><button id="btnSubmit">submit</button></p>
<br />
<br /> <p> Output :</p>
<div id="pageBox"> </div>
</div> <script type="text/javascript">
function byID(id){
return document.getElementById(id);
} var ui = {};
ui.btnSubmit = byID('btnSubmit');
ui.txtPageIndex = byID('txtPageIndex');
ui.txtPageCount = byID('txtPageCount');
ui.pageBox = byID('pageBox'); ui.btnSubmit.onclick = function(){
var pageIndex = ui.txtPageIndex.value;
var pageCount = ui.txtPageCount.value; var options = {
pageIndex: parseInt(pageIndex),
pageCount: parseInt(pageCount),
container: ui.pageBox
}; if(options.pageCount > 0){
var page = new pagination(options);
page.init();
}else{
alert(' The total number of pages cannot be less than 0');
} }; function pagination(options){
this.pageIndex = options.pageIndex || 1;
this.pageCount = options.pageCount;
this.showPage = options.showPage || 3;
this.container = options.container;
} pagination.prototype = {
init: function(){
/* Initialize to check whether the current page is reasonable */
this.pageIndex = this.pageIndex < 1 ? 1 : this.pageIndex;
this.pageIndex = this.pageIndex > this.pageCount ? this.pageCount : this.pageIndex; /* Rendering UI*/
this.render();
},
render: function(){
var pageList, setting; pageList = [];
setting = this.getSetting(this.pageIndex);
pageList.push('<ul class="pagination">'); if(this.pageIndex > 1){
pageList.push('<li><button value="' + setting.prev + '"> The previous page </button></li>'); if(setting.start > 1){
pageList.push('<li><button value="1">1</button></li>');
} if(setting.start > 2){
pageList.push('<li>...</li>');
}
}else{
pageList.push('<li><button value="1" disabled="disabled"> The previous page </button></li>');
} for (var i = setting.start; i <= setting.end; i++) {
if(i == this.pageIndex){
pageList.push('<li><button value="' + i + '" disabled="disabled">' + i + '</button></li>');
}else{
pageList.push('<li><button value="' + i + '">' + i + '</button></li>');
}
}; if(this.pageIndex < this.pageCount){
if(setting.end < this.pageCount){
if(setting.end < (this.pageCount - 1)){
pageList.push('<li>...</li>');
} pageList.push('<li><button value="' + this.pageCount + '">' + this.pageCount + '</button></li>');
} pageList.push('<li><button value="' + setting.next + '"> The next page </button></li>');
}else{
pageList.push('<li><button value="' + this.pageCount + '" disabled="disabled"> The next page </button></li>');
} pageList.push('</ul>');
this.container.innerHTML = pageList.join('\n');
this.regEvent();
},
regEvent: function(){
/* Event registration */
var _this = this;
var button = this.container.getElementsByTagName('button'); for(var i = 0; i < button.length; i++){
button[i].onclick = function(){
_this.change(parseInt(this.value));
};
}
},
change: function(index){
/* Triggered when the current page changes */
this.pageIndex = index;
this.render();
this.onChange(index);
},
getSetting: function(index){
var start, end, prev, next, s, e; s = 0;
e = 0; start = index - this.showPage;
end = index + this.showPage; if(start < 1){
s = Math.abs(start) + 1;
start = 1;
} if(end > this.pageCount){
e = end - this.pageCount;
end = this.pageCount;
} if(s > 0 && e <= 0){
e = s + end;
end = e > this.pageCount ? this.pageCount : e;
}else if(e > 0 && s <= 0){
s = start - e;
start = s < 1 ? 1: s;
} prev = index > start ? index - 1 : 1;
next = index < end ? index + 1 : end; /* The core algorithm , Calculate the start page and end page displayed according to the current page , The previous page , The next page These data */
return {start: start, end: end, prev: prev, next: next};
},
onChange: function(index){
/* Empty function , covering */
console.log(index);
}
}; </script>
</body>
</html>

pagination More articles on paging plug-ins

  1. Slider Scroll bar Pagination Paging plug-ins JS Ajax Data range filtering load Page turning note

    The second task after entering the post    According to the price range selected by the user   Filter data Repair BUG -  After filtering the data   The total number has not been updated . List display error . Page load error Some knowledge points used jquery Plug in series - Slider slider max ...

  2. jQuery Pagination Paging plug-ins

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery Pagination Paging plug-ins -- Refresh

    Source code address :https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  4. JQuery Pagination Paging plug-ins Added the home page, the last page and the jump function

    JQuery Paging plug-ins Good use of But the official does not provide the home page, the end page and the jump function I think this function can have , So it was improved One js One css From the inside of the connection link :http://pan.baidu.com/s/1n ...

  5. Jquery Pagination The paging plug-in uses

    JqueryPagination It's a simple and lightweight paging plug-in , It's easy to use , Just initialize an instance , And set the total number . Paging callback function . Other parameters can achieve no refresh paging function . preparation download jquery.min.js ...

  6. jQuery Pagination Paging plug-ins -- No refresh

    Source code :https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx generation ...

  7. jQuery Pagination Use of paging plug-ins

    One . quote CSS and JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...

  8. Jquery Paging plug-ins Jquery Pagination

    Jquery Paging plug-ins Jquery Pagination For paging plug-ins , I think it's applicable , Try to be as simple as possible, and then be able to change skin according to different application scenarios . Show form, etc . For beginners who want to write pagination plug-ins , You can also look at the source code , Code also ...

  9. Jquery Front end paging plug-in pagination Use

    Plug-in description :JqueryPagination It's a lightweight jquery Paging plug-ins . With a few simple configurations, you can generate paging controls . And support ajax get data , Custom request parameters , There are many ways , Events and callback functions , It's fully functional ...

Random recommendation

  1. mysql5.6 New features summary

    One . server Changes in parameter default settings http://dev.mysql.com/doc/refman/5.6/en/server-default-changes.html Two . innodb enhance 1. whole ...

  2. stay Eclipse China online installation Emmet And the use of graphic tutorial

    ZenCoding Upgrade to Emmet after , be based on Eclipse The plug-in installation address of has also changed , The following is based on Eclipse Of IDE Installation and use of Emmet A graphic example of . One . open Eclip ...

  3. .net Url rewrite

    Detailed description and download dll Source path : http://msdn.microsoft.com/zh-cn/library/ms972974.aspx By the way, I write a small example :http://files.cnbl ...

  4. jruby The abnormal

    Have a look first ruby The abnormal knowledge in : exception handling raise  Example : raise raise "you lose" raise SyntaxError.new("invalid sy ...

  5. java+mysql Save the picture to the database , And reading pictures stored in the database

    One : Build table Two : Get database connection 1: Import mysql The driver jar package ,mysql-connector-java-5.1.8-bin.jar 2: Write code to connect to the database , as follows : /** * */ package c ...

  6. AjaxFileUpload Firefox It doesn't work (zero-width space characters from a JavaScript string)

    Firefox The returned prompt reports an error parse error (Chrome and IE normal ) Print out the returned string , Visual inspection is normal Put the string in notepad++, Convert the character set to ANSI It's found that there are more Euro symbols adopt j ...

  7. AngularJS - Introduction to basic functions

    Reprinted from :http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html ( Well written Angular introduction , You can try ) Angula ...

  8. Blue Bridge Cup - Strange fraction -java

    /* ( Program header comments start ) * The copyright and version declaration part of the program * Copyright (c) 2016, Student of Information Engineering Department of Guangzhou Vocational College of science, technology and trade * All rights reserved. * File name : ...

  9. QBlog V2.5 Open source download (ASP.NET The beginning of fanwai series )

    QBlog brief introduction : QBlog: It's a blog system , Open source . Multi user support . Multilingual . And convenient multi database switching . QBlog download :http://www.cyqdata.com/download/article-det ...

  10. How to use django Operating the database , Add new field information to the original table and establish a many to many relationship ?

    ( notes : I use the pycharm development tool ) 1. Where you want to add a new field app Of models.py Add the fields that need to be added to the file (book Table new authors Fields and author Build many to many relationships ,author Table new ...