Js pagination entries get rid of the limitations of JQuery and JQuery pagination plug-ins

This is a Js paging bar I wrote for a long time. Today I accidentally read this file in my JS class library and read it, I think this may be useful in the future.

So save it and try again, for fear you will not be found in the future. Simple logic, simple implementation, and non-simple application.

Think about yourself a long time ago, I wanted to write a page, search for third-party controls on the Internet, and always use Baidu and Google to check how to use them. Now I think it's really naive.

Later, I wanted to write a paging bar by myself. At that time, I was writing An ASPX page, but I didn't know much about ASP. NET running principles. At that time, I used VIEWSTATE to save data,

Even more naive, since I write a different number of page numbers, I will not write it, but I will write it to death and worship other people's websites for various pages. Oh, my God! Now you can think about what you want to do.

Now I can only express my feelings. What pages are cloudization!

Well, it's time for me to get back to the code after so long.

Pagination. Js:

View Code

/*
Author: Kuse Wu
Date: 16:00:00
Modified: 09:00:00
Tips:
Instructions:
Parameter description for creating a pagination object. (Json format)
TotalCount: Total number of records, required.
LeftInterval: number of separate pages on the left of the current page number. Default Value: 2
RightInterval: number of separate pages on the right of the current page number. Default Value: 3
ClassName: name of the style class. Default: yahoo2 subclass naming rule: current prev next disabled status
PageSize: the number of records on a single page. Default Value: 10
CallBack: callBack function. Obtain the index parameter, the current page number.
CopyRight: Jusoc
*/

Function pagination (data ){
Var inner = {leftInterval: 2, rightInterval: 3, totalCount: 0, pageSize: 10, className: "yahoo2 "};
Var pagecount = null;
Var container = null;
Function initialize (){
If (data ){
If (data. totalCount) inner. totalCount = data. totalCount;
If (data. callBack) inner. callBack = data. callBack;
If (data. rightInterval) inner. rightInterval = data. rightInterval;
If (data. leftInterval) inner. leftInterval = data. leftInterval;
If (data. pageSize) inner. pageSize = data. pageSize;
If (data. className) inner. className = data. className;
}
Pagecount = Math. ceil (inner. totalCount/inner. pageSize );
Container = document. createElement ("div ");
Container. className = "yahoo2 ";
}
This. pager = function (index ){
RenderPager (index );
}
Function renderPager (pagenumber ){
RemoveAll (container); // clear all elements in the container

// When no record exists
If (inner. totalCount <= 0 ){

Container. appendChild (createElement ("0 pages in total", "span", null, "status "));
Document. body. appendChild (container );
Return;
}

// Create a previous page
Container. appendChild (renderButton ("prev", pagenumber, renderPager ));
Var startIndex = Math. max (1, (pagenumber-inner. leftInterval ));
Var endIndex = Math. min (pagecount, (pagenumber + inner. rightInterval ));

If (pagenumber <inner. leftInterval + 1 ){
EndIndex = (inner. leftInterval + inner. rightInterval + 1)> pagecount? Pagecount: (inner. leftInterval + inner. rightInterval + 1)
}
If (pagenumber + inner. rightInterval)> pagecount ){
StartIndex = (pagecount-inner. leftInterval-inner. rightInterval) <1? 1: (pagecount-inner. leftInterval-inner. rightInterval );
}
// For create a digital Loop
For (var I = startIndex; I <endIndex + 1; I ++ ){
If (pagenumber = I ){
Container. appendChild (createElement (I, "span", null, "current", I ));
}
Else {
// Create Element
Container. appendChild (createElement (I, "a", renderPager, "", I ));
}
}
// Creation omitted
If (inner. leftInterval + inner. rightInterval + 1) <pagecount & pagenumber! = Pagecount)
Container. appendChild (createElement ("...", "span", null, "status "));

// Create the next page
Container. appendChild (renderButton ("next", pagenumber, renderPager ));

// Create the total number of pages
Container. appendChild (createElement ("Total" + pagecount + "page", "span", null, "status "));
// -------------------------- Create text
Var span = createElement ("", "span", null, "status ");
Var inputText = document. createElement ("input ");
InputText. id = "txtPageIndex ";
InputText. type = "text ";
InputText. value = pagenumber;
InputText.style.css Text = "width: 20px; text-align: center ;";
Span. appendChild (inputText );
Container. appendChild (span );

// ------------------------------ Create button
Var span1 = createElement ("", "span", null, "status ");
Var inputBtn = document. createElement ("input ");
InputBtn. type = "button ";
InputBtn. value = "OK ";
InputBtn. onclick = function () {goto (pagenumber, "txtPageIndex ");};
Span1.appendChild (inputBtn );
Container. appendChild (span1 );

// ----- Callback
If (inner. callBack) inner. callBack (pagenumber );


Document. body. appendChild (container );
}
// Button jump Method
Function goto (index, id ){
Var val = parseInt (document. getElementById (id). value );
If (val> pagecount) val = pagecount;
If (val <1) val = 1;
RenderPager (val );
}
// Create the first page of the last page of the previous page
Function renderButton (buttonLable, pagenumber, buttonClickCallback ){
Var destPage = 1;
Var obj = null;
Switch (buttonLable ){
Case "first": // Error
DestPage = 1;
If (pagenumber = 1)
Obj = createElement (buttonLable, "span", null, "disabled", destPage );
Else
Ob = createElement ("first page", "a", buttonClickCallback, "", destPage );
Break;
Case "prev ":
DestPage = pagenumber-1;

If (pagenumber = 1 ){
Obj = createElement ("Previous Page", "span", null, "disabled", destPage );
}
Else {
Obj = createElement ("Previous Page", "a", buttonClickCallback, "prev", destPage );
}
Break;
Case "next ":
DestPage = pagenumber + 1;
If (pagenumber = pagecount ){
Obj = createElement ("next page", "span", null, "disabled", destPage );
}
Else {
Obj = createElement ("next page", "a", buttonClickCallback, "next", destPage );
}
Break;
Case "last": // Error
DestPage = pagecount;
If (pagecount = pagenumber)
Obj = createElement (buttonLable, "span", null, "disabled", destPage );
Else
Obj = createElement ("last page", "a", buttonClickCallback, "", destPage );
Break;
}
Return obj;
}
// Create Element
Function createElement (text, type, fn, className, destPage ){
Var o = document. createElement (type );
O. className = className;
O. innerHTML = text;
If (type = ""){
O. href = "javascript: void (0 )";
If (fn)
O. onclick = function () {fn (destPage );};
}
Return o;
}
// Delete all nodes
Function removeAll (obj ){
If (obj. childNodes. length> 0)
For (var I = obj. childNodes. length-1; I>-1; I --){
Obj. removeChild (obj. childNodes [I]);
}
}
Initialize ();
}

HTML:

Var p = new pagination ({totalCount: 1111, callBack: fn });

P. pager (1 );

 

Summary: At that time, I said that I did not have a better understanding of js encapsulation, and it was quite awkward to call it.

However, since it was previously written, I still secretly laughed at it myself! Well, it's good. It's good.
Done ~ Ho ~