Based on client-side paging navigation

Navigation | pagination | client

Thinking: With pure JS method, only by judging the current page of the file name, and then figure out the upper and lower pages address, home and last need to configure in the script, and finally generate navigation code. Data-bound methods are much simpler, set datapagesize, and then page by FirstPage (), PreviousPage (), NextPage (), and LastPage () methods.

code example:

　　1. Pure JS, page navigation based on the filename page.js script file code

Number.prototype.add0 = function () {//extension of numeric type, mainly used to make up 0 before a number is smaller than a certain number of digits until the multiple is reached
Return (new Array (len). Join ("0") +this). Slice (-len)//back string, new Array (len). Join ("0") gets len a connected "0" and then adds to the number, And intercept the Len bit from the right of the resulting string.
}
String.prototype.mlink = function (n) {//extension of character type, primarily used to generate links based on numbers in file names
Return This.link (prefix+n.add0 () +suffix)//returns HTML code with a string of linked text, prefix+n.add0 () +subffix as the link address
var prefix = "page"//filename Prefix
var suffix = ". htm"//filename suffix
var first = 1//number in File name of page one
var last = 23//The number in the filename of the final page
var len = 2//The number of digits in the file name, from the above four variables known as "page01.htm" and "page23.htm" this form
var cur_page = Location.href.match (New RegExp (prefix+ (\\d+) +suffix, "I")) [1]|0//Find matching number from current page address
var previous = cur_page-1//The number in the filename of the previous page is minus 1 for the current page
var next = the number in the filename of the next page is plus 1 for the current page cur_page+1
if (cur_page = i) previous = first//If the current page is the home page, then the link on the previous page is the home page
if (Cur_page =) Next = last///if the current page is last, the link to the next page is the end
navbar.innerhtml = ["Home". Mlink (first), "Prev". Mlink (previous), "next page". Mlink (Next), "End". Mlink (last)].join ("")///in ID Generate navigation links in NavBar objects

Then use the <div id= "NavBar" ></div><script src= "Page.js" ></script> calls on each page

　　2. Data binding to the table, and then using the object's page-flipping method to achieve

<xml id= "oXML" > <forums> <forum> <name>[flash Technical Exchange]</name> <moderator [cdata[Moderator: Win some chenye_1976 Holybozo laiy.net]]></moderator> <description ><! [cdata[Novice Please, despite the questions, veteran to learn from, so that learning and help have become a pleasure. ]]> </description> </forum> <forum> <name>[action Script Discussion area]</name> <moderator &G t;<! [cdata[Moderator: Hnyashiro crazydevil horidream]]></moderator> <description ><! [Cdata[action script application, including Flash MX discussion]]> </description> </forum> <forum> <name>[macromedia Studio MX 2004 discusses the learning area]</name> <moderator ><! [cdata[Moderator: AOL kissall i foshan people]]></moderator> <description ><! [cdata[Exchange Learning Macromedia Studio MX 2004 experiences and experience, welcome to provide system tutorials and materials translation. New]]> </description> </forum> <forum> <name>[flash Animation Technology Area]</name> <moderator ><! [cdata[Moderator: Crooked Ma Shu scavenging forest ℃]]></moderator> <description ><! [cdata[Intermediate Animation Enthusiasts Advanced Technology Section, here we discuss how toMake animation modeling, action, background and other production techniques. ]]> </description> </forum> <forum> <name>[flash game Tech Zone]</name> <moderator > <! [cdata[Moderator: AOL windson2002]]></moderator> <description ><! [cdata[here only discusses flash game technology.]] > </description> </forum> <forum> <name>[Graphics processing and visual communication]</name> <moderator ><! [cdata[Moderator: Genzhi bodyguard Doug Wxb_snowwolf Wind has no trace]]></moderator> <description ><! [Cdata[All Creation Foundation comes from the basic skill of the graphics processing, Flash is no exception. Like this friend may wish to communicate here, discuss. ]]> </description> </forum> <forum> <name>[hand-painted arts and character design]</name> <moderator >< ! [cdata[Moderator: Genzhi Fei water]]></moderator> <description ><! [cdata[hand-painted art and role design]]> </description> </forum> <forum> <name>[flash resource sharing]</name> < Moderator ><! [cdata[Moderator: Kissall Wood crazyno1]]></moderator> <description ><! [Cdata[flash Related resources and software Exchange.]] > </description> </forum> <forum> <name>[Flash 3d Technology Special Edition]</name> <moderator ><! [cdata[Moderator: Snow-waving]]></moderator> <description ><! [cdata[discusses how to get the objects in flash to move in three dimensions]]> </description> </forum> <forum> <name>[Web design and programming]</ Name> <moderator ><! [Cdata[Moderator: Sea Light I foshan people erik168]]></moderator> <description ><! [cdata[We discuss all the things related to Web design]]> </description> </forum> <forum> <name>[Boutique Web-site]</name > <moderator ><! [cdata[Moderator: Brahma chenglei4u]]></moderator> <description ><! [cdata[boutique Web-site and Flash Animation Display Special Edition]]> </description> </forum> <forum> <name>[Flash Bar Computer School]</ Name> <moderator ><! [cdata[Moderator: Xray blue. Snail]]></moderator> <description ><! [cdata[Computer World, you and I to explore. You encounter all kinds of problems, we will help you. (Carrot and Stick + network)]]> </description> </forum> </forums> </xml> <style> table{border-collapse : Collapse;width:600px;font:normal 12px tahoma;background: #EEEEEE} button{border:1px solid #666666 background: #EEEEEE} </style> <center> <table bordercolor= "#333333" Border= "1" cellspacing= "0" cellpadding= "3" datasrc= "#oXML" datapagesize= "2" id= "dtable" > <tr> &LT;TD width= "25%" rowspan= "2" align= "center" valign= "top" ><span datafld= "name"/></td> Width= "75%" height= "><span datafld=" moderator "/></td> </tr> <tr> <td><span datafld= "description"/></td> </tr> </table> <table border= "0" Cellspaci ng= "0" cellpadding= "3" > <tr> <td align= "right" colspan= "2" ><button > Home </butto N><button > Prev </button><button > Next </button><button > Last page </button></td > </tr> </table>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Note: You must set the DataPageSize property of the table, and the data source corresponds to the ID of the XML object, and the object on the page must correspond to the table object that binds the data

Tips:
DataPageSize Sets or gets the number of records displayed in a table bound to a data source
DATASRC Sets or gets the data source used for data binding
DATAFLD Sets or gets the field specified by the Datasrc property that binds to the given data source of the specified object
FirstPage The first page record of the dataset that binds the table
PreviousPage the previous page record of the dataset that binds the table
NextPage the next page record of the dataset that binds the table
LastPage displays the last page record of the dataset that binds the table
Tip: If you are displaying only one record at a time, you can also use the recordset to move the method:

<xml id= "oXML" >
<forums> <forum>
<name>[flash Technical Exchange]</name>
<moderator ><! [cdata[Moderator: Win some chenye_1976 Holybozo laiy.net]]></moderator>
<description ><! [cdata[Novice Please, despite the questions, veteran to learn from, so that learning and help have become a pleasure. ]]> </description>
</forum> <forum>
<name>[action Script Discussion Area]</name>
<moderator ><! [cdata[Moderator: Hnyashiro crazydevil horidream]]></moderator>
<description ><! [Cdata[action script application, including Flash MX discussion]]> </description>
</forum> <forum>
<name>[macromedia Studio MX 2004 discusses learning area]</name>
<moderator ><! [cdata[Moderator: AOL kissall i foshan people]]></moderator>
<description ><! [cdata[Exchange Learning Macromedia Studio MX 2004 experiences and experience, welcome to provide system tutorials and materials translation. New]]> </description>
</forum> <forum>
<name>[flash Animation Technology Area]</name>
<moderator ><! [cdata[Moderator: Crooked Ma Shu Scavenging forest ℃]]></moderator>
<description ><! [cdata[Intermediate Animation Enthusiasts Advanced Technology Section, here we discuss how to make animation modeling, action, background and other production technology.] > </description>
</forum> <forum>
<name>[flash Game Technology Area]</name>
<moderator ><! [cdata[Moderator: AOL windson2002]]></moderator>
<description ><! [cdata[here only discusses flash game technology.]] > </description>
</forum> <forum>
<name>[graphic processing and visual communication]</name>
<moderator ><! [cdata[Moderator: Genzhi bodyguard Doug Wxb_snowwolf Wind has no trace]]></moderator>
<description ><! [Cdata[All Creation Foundation comes from the basic skill of the graphics processing, Flash is no exception. Like this friend may wish to communicate here, discuss. ]]> </description>
</forum> <forum>
<name>[hand-painted art and role design]</name>
<moderator ><! [cdata[Moderator: Genzhi Fei water]]></moderator>
<description ><! [cdata[hand-painted art and role design]]> </description>
</forum> <forum>
<name>[flash resource Sharing]</name>
<moderator ><! [cdata[Moderator: Kissall Wood crazyno1]]></moderator>
<description ><! [Cdata[flash Related resources and software Exchange.]] > </description>
</forum> <forum>
<name>[flash 3d Technology Special Edition]</name>
<moderator ><! [cdata[Moderator: Snow-waving]]></moderator>
<description ><! [cdata[discusses how to get the objects in flash to move in three dimensions]]> </description>
</forum> <forum>
<name>[Web design and programming]</name>
<moderator ><! [Cdata[Moderator: Sea Light I foshan people erik168]]></moderator>
<description ><! [cdata[We discuss all the things related to Web design]]> </description>
</forum> <forum>
<name>[Boutique Web-site]</name>
<moderator ><! [cdata[Moderator: Brahma chenglei4u]]></moderator>
<description ><! [cdata[boutique Web-site and Flash Animation Display Special Edition]]> </description>
</forum> <forum>
<name>[, Computer School,]</name>.
<moderator ><! [cdata[Moderator: Xray Blue. Snail]]></moderator>
<description ><! [cdata[Computer World, you and I to explore. You encounter all kinds of problems, we will help you. (Carrot and Stick + network)]]> </description>
</forum> </forums>
</xml>
<style>
Table{border-collapse:collapse;width:600px;font:normal 12px tahoma;background: #EEEEEE}
button{border:1px solid #666666; background: #EEEEEE}
</style>
<center>
<table bordercolor= "#333333" border= "1" cellspacing= "0"
cellpadding= "3" >
<tr>
&LT;TD width= "25%" rowspan= "2" align= "center" valign= "top" ><span datasrc= "#oXML" datafld= "name"/></td >
&LT;TD width= "75%" height= "><span datasrc=" datafld= "moderator"/></td>
</tr>
<tr>
<td><span datasrc= "#oXML" datafld= "description"/></td>
</tr>
</table>
<table border= "0" cellspacing= "0"
cellpadding= "3" >
<tr>
&LT;TD align= "Right" colspan= "2" ><button > Home page </button><button > prev </button><button > Next </button><button > Last page </button></td>
</tr>
</table>