JS代码为

1. <script type="text/javascript">
   
2.         var totalPage = 1; //总页数
   
3.         var totalNode; //总节点
   
4.         var ksCount = 8; //可是区显示几页
   
5. 
   
6.         var fid = 0;
   
7. 
   
8.         var currentNode = 1; //当前节
   
9.         var currentPage = 1; //当前页
   
10.         $(function () {
    
11.             $.post("../admin/ashx/news.ashx", { "action": "getNewsCount" }, function (data, status) {
    
12.                 if (status == "success") {
    
13.                     var res = data.split("_");
    
14.                     totalPage = parseInt(res[0]);
    
15. 
    
16.                     initPage();
    
17.                     $("#totalJL").html(res[1]);
    
18.                 }
    
19.             });
    
20. 
    
21.             goto(1);
    
22.             $(".closeEdit").click(function () {
    
23.                 $(".tanchuEdit").fadeOut();
    
24.             });
    
25. 
    
26. 
    
27.         });
    
28.         //点击指定页码发生的动作
    
29.         function ynase(obj) {
    
30.             if ($(obj).html() != currentPage) {
    
31.                 goto($(obj).html());
    
32.                 $(".num").css("background-color", "#FFFFFF");
    
33.                 $(".num").css("color", "#326fc1");
    
34.                 $(obj).css("background-color", "#326fc1");
    
35.                 $(obj).css("color", "#FFFFFF");
    
36.             }
    
37. 
    
38. 
    
39.         }
    
40.         //转到指定页面
    
41.         function goto(page) {
    
42.             var load = "<tr><td style='text-align:center; border:0'>加载中...</td></tr><tr><td style='text-align:center; height:20px;'><img src='../images/load.gif' /></td></tr>";
    
43.             $("#conte").html(load);
    
44.             $.post("../admin/ashx/news.ashx", { "action": "getNewsByPage", "page": page }, function (data, status) {
    
45.                 if (status == "success") {
    
46.                     var tgs = $.parseJSON(data);
    
47.                     $("#conte").empty();
    
48. 
    
49.                     for (var i = 0; i < tgs.length; i++) {
    
50.                         var tr = $("<tr><td style='width:22px'><img src='../images/newslo.gif'/></td><td><a href='news-" + tgs[i].id + ".html'>" + tgs[i].title + "</a></td><td style='text-align:right'>" + tgs[i].shijian + "　　<a href='news-" + tgs[i].id + ".html'>查看全文</a></td></tr>");
    
51.                         //var tr = $("<tr ><td>" + tgs[i].id + "</td><td>" + tgs[i].title + "</td><td>" + tgs[i].shijian + "</td><td><a href='admin_addNews.aspx?nid=" + tgs[i].id + "'><img src='../images/edit.png' style='cursor:pointer; border:0'   nid='" + tgs[i].id + "' /></a></td><td style='width:100px'><a href='#' target='_blank'>预览</a></td><td><img src='../images/del.png'class='delFile'onclick='del(this)' fid='" + tgs[i].id + "'></td></tr>");
    
52.                         $("#conte").append(tr);
    
53.                     }
    
54. 
    
55.                     currentPage = page;
    
56.                 }
    
57.             });
    
58.         }
    
59.         
    
60.       
    
61. 
    
62.         //初始化
    
63.         function initPage() {
    
64. 
    
65. 
    
66.             totalNode = parseInt(totalPage / ksCount);
    
67.             if (totalPage % ksCount != 0) {
    
68.                 totalNode = totalNode + 1;
    
69.             }
    
70. 
    
71.             for (var i = 1; i <= totalPage; i++) {
    
72.                 $("#fy").append("<span class='num' onclick='ynase(this)'>" + i + "</span>");
    
73.             }
    
74. 
    
75.             $(".num:lt(" + ksCount + ")").fadeIn();
    
76.             $(".num:eq(0)").css("background-color", "#326fc1");
    
77.             $(".num:eq(0)").css("color", "#FFFFFF");
    
78.             //下一节
    
79.             $("#next").click(function () {
    
80.                 if (currentNode < totalNode) {
    
81.                     $(".num").css("display", "none");
    
82.                     $(".num:gt(" + (currentNode * ksCount - 1) + "):lt(" + ksCount + ")").fadeIn();
    
83.                     ynase(".num:eq(" + (currentNode * ksCount) + ")");
    
84.                     currentNode++;
    
85.                     currentPage = currentNode * ksCount + 1;
    
86. 
    
87.                 }
    
88.             });
    
89.             //上一节
    
90.             $("#prev").click(function () {
    
91.                 if (currentNode > 1) {
    
92.                     $(".num").css("display", "none");
    
93. 
    
94.                     $(".num:gt(" + (currentNode - 2) * ksCount + "):lt(" + (ksCount - 1) + ")").fadeIn();
    
95.                     $(".num:eq(" + (currentNode - 2) * ksCount + ")").fadeIn();
    
96.                     ynase(".num:eq(" + (currentNode - 2) * ksCount + ")");
    
97.                     currentNode--;
    
98.                     currentPage = (currentNode - 2) * ksCount + 1;
    
99. 
    
100.                 }
     
101.             });
     
102.             //首页
     
103.             $("#first").click(function () {
     
104.                 if (currentPage != 1) {
     
105.                     ynase(".num:eq(0)");
     
106.                 }
     
107.                 if (currentNode != 1) {
     
108.                     $(".num").css("display", "none");
     
109.                     $(".num:lt(" + ksCount + ")").fadeIn();
     
110.                     currentNode = 1;
     
111. 
     
112.                 }
     
113. 
     
114. 
     
115.             });
     
116. 
     
117.             //末页
     
118.             $("#last").click(function () {
     
119.                 //alert(currentPage);
     
120.                 if (currentPage != totalPage) {
     
121.                     ynase(".num:eq(" + (totalPage - 1) + ")");
     
122.                 }
     
123.                 if (currentNode != totalNode) {
     
124.                     $(".num").css("display", "none");
     
125.                     $(".num:gt(" + ((totalNode - 1) * ksCount - 1) + ")").fadeIn();
     
126.                     currentNode = totalNode;
     
127. 
     
128.                 }
     
129. 
     
130. 
     
131. 
     
132. 
     
133.             });
     
134.             //
     
135. 
     
136. 
     
137. 
     
138.         }
     
139.     </script>

复制代码

html代码为

1. <div id="rContent">
   
2.      <table width="96%" id="conte" >
   
3.      </table>
   
4.       <div style="margin-top:10px; float:left"><span class="num2" id="first">首页</span><span class="num2" id="prev">上一节</span><div id="fy"></div><span class="num2" id="next">下一节</span><span class="num2" id="last">末页</span></div>
   
5.     </div>
   
6. 
   
7. </div>

复制代码

值得学习ing!

是不是你博客上那个留言板相关的.我看了那个界面,很漂亮.

颜晋南 发表于 2012-10-17 21:04
是不是你博客上那个留言板相关的.我看了那个界面,很漂亮.

呵呵，分页的JS不是，我留言本的分页是一个Jquery插件。这个分页是我自己搞的一个