JavaScript简单分页

最新推荐文章于 2024-09-20 11:38:47 发布
baby4640
最新推荐文章于 2024-09-20 11:38:47 发布
阅读量101
点赞数
文章标签： javascript xhtml c# ViewUI
原文链接：http://www.cnblogs.com/YangFei-wow/archive/2012/07/05/2577678.html
版权
  1 01.<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jsfenye.aspx.cs" Inherits="jsfenye" %>  
  2 02.  
  3 03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4 04.  
  5 05.<html xmlns="http://www.w3.org/1999/xhtml">  
  6 06.<head runat="server">  
  7 07.    <title></title>  
  8 08.    <style type="text/css">  
  9 09.    #div1  
 10 10.    {  
 11 11.        width:50%;  
 12 12.        height:30%;  
 13 13.        background-color:Green;  
 14 14.        font-size:20px;  
 15 15.        padding-top:10px;  
 16 16.        }  
 17 17.        #firstpage  
 18 18.        {  
 19 19.             float:left;  
 20 20.             width:5%;  
 21 21.            }  
 22 22.            #doingpages  
 23 23.            {  
 24 24.                 float:left;  
 25 25.                 width:auto;  
 26 26.                }  
 27 27.            #lastpage  
 28 28.            {  
 29 29.              float:left;  
 30 30.              width:5%;  
 31 31.                }  
 32 32.    </style>  
 33 33.    <script type="text/javascript">  
 34 34.        var allpagetext;        //保存div中的总内容  
 35 35.        var mynowindex;    //保存当前的页索引  
 36 36.        var pagecount;  //总页数  
 37 37.        function mychar() {  
 38 38.  
 39 39.            var mydoingdiv = document.getElementById("doingpages");  
 40 40.            //当改变每页的字符数时，需要将以前的链接删除  
 41 41.            if (mydoingdiv.childNodes.length > 0) {  
 42 42.               var myalength=mydoingdiv.childNodes.length;    
 43 43.               for (var i = 0; i < myalength; i++) {  
 44 44.                   var olda = mydoingdiv.getElementsByTagName('a')[i];   
 45 45.  
 46 46.                   if (olda != null) {  
 47 47.  
 48 48.                       olda.parentNode.removeChild(olda); //删除超链接  
 49 49.                       i--;  
 50 50.                   }  
 51 51.  
 52 52.               }  
 53 53.            }  
 54 54.             
 55 55.                var mydiv = document.getElementById("div1");  
 56 56.                if (allpagetext != null) {  
 57 57.                    mydiv.innerText = allpagetext;  
 58 58.                }  
 59 59.                else {  
 60 60.                    allpagetext = mydiv.innerText;  
 61 61.                }  
 62 62.                var pagesize = document.getElementById("text1").value;  //看text1要每页显示的字符个数  
 63 63.                var totalLength = allpagetext.length;  //div1中总共有多少字符  
 64 64.                 
 65 65.                if (parseInt(pagesize) > totalLength) {  
 66 66.                    alert("超过总字符数，总字符才有" + totalLength + "个字符");  
 67 67.                }  
 68 68.                else {  
 69 69.  
 70 70.                   //看有多少页数  
 71 71.                    if (totalLength % parseInt(pagesize) == 0) {  
 72 72.                       pagecount = totalLength / parseInt(pagesize);    
 73 73.  
 74 74.  
 75 75.                    }  
 76 76.                    else {  
 77 77.  
 78 78.                        pagecount =Math.ceil(totalLength / parseInt(pagesize));  //如果除不尽，则用函数ceil加一页  
 79 79.                    }  
 80 80.                     
 81 81.                     
 82 82.                    for (var j = 1; j <= pagecount; j++) {  
 83 83.                        var afirst = document.createElement('a');  
 84 84.                        afirst.href = "javascript:nowpageindex(" + j + ")";    
 85 85.                        var atext = document.createTextNode(j);  
 86 86.                        afirst.appendChild(atext);  
 87 87.                        document.getElementById("doingpages").appendChild(afirst); //创建超链接显示页数  
 88 88.  
 89 89.                    }  
 90 90.  
 91 91.                    var nowText = mydiv.innerText.substr(0, parseInt(pagesize));//默认显示第一页  
 92 92.                    mydiv.innerText = nowText;  
 93 93.                }  
 94 94.             
 95 95.  
 96 96.  
 97 97.        }  
 98 98.        
 99 99.  
100 100.        //当点击第几页时相应显示那一页的内容的函数代码  
101 101.        function nowpageindex(pageindex) {  
102 102.            var mydiv = document.getElementById("div1");  
103 103.            mynowindex = pageindex;  
104 104.            if (allpagetext != null) {  
105 105.                mydivtext = allpagetext;  
106 106.            }  
107 107.            else {  
108 108.                allpagetext = mydiv.innerText;  
109 109.            }  
110 110.  
111 111.            var mytext1 = document.getElementById("text1").value;  
112 112.            if (mytext1 != null) {  
113 113.  
114 114.                var newindex = parseInt(pageindex-1) * parseInt(mytext1);  
115 115.                mydiv.innerText = allpagetext.substr(newindex, newindex + parseInt(mytext1));  
116 116.                  
117 117.            }  
118 118.        }  
119 119.        //上一页代码  
120 120.        function jianpageindex() {  
121 121.            if (mynowindex > 0) {  
122 122.                mynowindex--;  
123 123.            }  
124 124.            var mydiv = document.getElementById("div1");  
125 125.            
126 126.            if (allpagetext != null) {  
127 127.                mydivtext = allpagetext;  
128 128.            }  
129 129.            else {  
130 130.                allpagetext = mydiv.innerText;  
131 131.            }  
132 132.  
133 133.            var mytext1 = document.getElementById("text1").value;  
134 134.            if (mytext1 != null) {  
135 135.  
136 136.                var newindex = parseInt(mynowindex - 1) * parseInt(mytext1);  
137 137.                mydiv.innerText = allpagetext.substr(newindex, newindex + parseInt(mytext1));  
138 138.  
139 139.            }  
140 140.        }  
141 141.        //下一页代码  
142 142.        function addpageindex() {  
143 143.            if (mynowindex < pagecount) {  
144 144.                mynowindex++;  
145 145.            }  
146 146.            var mydiv = document.getElementById("div1");  
147 147.             
148 148.            if (allpagetext != null) {  
149 149.                mydivtext = allpagetext;  
150 150.            }  
151 151.            else {  
152 152.                allpagetext = mydiv.innerText;  
153 153.            }  
154 154.  
155 155.            var mytext1 = document.getElementById("text1").value;  
156 156.            if (mytext1 != null) {  
157 157.  
158 158.                var newindex = parseInt(mynowindex - 1) * parseInt(mytext1);  
159 159.                mydiv.innerText = allpagetext.substr(newindex, newindex + parseInt(mytext1));  
160 160.  
161 161.            }  
162 162.  
163 163.       }  
164 164.  
165 165.    </script>  
166 166.</head>  
167 167.<body onload="mychar()">  
168 168.    <form id="form1" runat="server">  
169 169.    <div>  
170 170.    <div id="firstpage">  
171 171.     <a href="javascript:jianpageindex()">上一页</a>  
172 172.    </div>  
173 173.    <div id="doingpages">  
174 174.  
175 175.    </div>  
176 176.    <div id="lastpage">  
177 177.    <a href="javascript:addpageindex()">下一页</a>  
178 178.    </div>  
179 179.    </div>  
180 180.  
181 181.    <div>  
182 182.    <input type="text"  id="text1" value="100"/>  
183 183.    <input type="button" value="确定" onclick="mychar()"  id="btnok"/>  
184 184.    </div>  
185 185.    <div id="div1">  
186 186.     哈喽,大家好,<br /><br />  
187 187.     听见傍晚，车窗外，未来有一个人在等待，<br /><br />  
188 188.     如果梦想没别大海冷冷拍下，又怎么会晓得哈哈,<br /><br />  
189 189.     所以愿意，舍得让你飞翔更高的地方去。<br /><br />  
190 190.     也许放弃，宁静的夏天，听课，天空一片<br /><br />  
191 191.     哈喽,大家好,<br /><br />  
192 192.     听见傍晚，车窗外，未来有一个人在等待，<br /><br />  
193 193.     如果梦想没别大海冷冷拍下，又怎么会晓得哈哈,<br /><br />  
194 194.     所以愿意，舍得让你飞翔更高的地方去。<br /><br />  
195 195.     也许放弃，宁静的夏天，听课，天空一片念经<br /><br />  
196 196.     不是寂寞才想你，而是因为想你才寂寞，袭来的窗台，不雅天台伤怀，滴滴答答等你来<br /><br />  
197 197.     泪湿的等到下一个春秋，邓蕾落下的时候，所有风景都成膜，月光轻轻，所有屋面的页，想你够不够<br /><br />  
198 198.     看云水漂流，看着落叶被带走，等到下一个春秋  
199 199.    </div>  
200 200.    </form>  
201 201.</body>  
202 202.</html>