黑马程序员之 ASP.NET学习笔记:jquery+ajax无刷新分页代码

---------------------------------------2345王牌技术员联盟、2345王牌技术员联盟、期待与您交流！--------------------------------------------

JS代码：

<script type="text/javascript">

         var totalPage = 1; //总页数

         var totalNode; //总节点

         var ksCount = 8; //可是区显示几页

         var fid = 0;

         var currentNode = 1; //当前节

         var currentPage = 1; //当前页

        $(function ()

        {

                    $.post("../admin/ashx/news.ashx", { "action": "getNewsCount" }, function (data, status)

                    {

                              if (status == "success")

                            {

                                      var res = data.split("_");

                                     totalPage = parseInt(res[0]);

                                     initPage();

                                    $("#totalJL").html(res[1]);

                             }

         } );

        goto(1);

        $(".closeEdit").click(function ()

        {

                  $(".tanchuEdit").fadeOut();

        });

});

      //点击指定页码发生的动作

    function ynase(obj) {

    if ($(obj).html() != currentPage) {

       goto($(obj).html());

         $(".num").css("background-color", "#FFFFFF");

              $(".num").css("color", "#326fc1");

              $(obj).css("background-color", "#326fc1");

            $(obj).css("color", "#FFFFFF");

        }    

}

       //转到指定页面
        function goto(page) {
         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>";
           $("#conte").html(load);
          $.post("../admin/ashx/news.ashx", { "action": "getNewsByPage", "page": page }, function (data, status) {
                if (status == "success") {
                 var tgs = $.parseJSON(data);
                   $("#conte").empty();
                    for (var i = 0; i < tgs.length; i++) {
                        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>");
                        //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'οnclick='del(this)' fid='" + tgs[i].id + "'></td></tr>");
                        $("#conte").append(tr);
                    }
                    currentPage = page;                }
           });
        }
                //初始化
       function initPage() {


           totalNode = parseInt(totalPage / ksCount);
           if (totalPage % ksCount != 0) {
                totalNode = totalNode + 1;
            }

            for (var i = 1; i <= totalPage; i++) {
                $("#fy").append("<span class='num' οnclick='ynase(this)'>" + i + "</span>");
            }

            $(".num:lt(" + ksCount + ")").fadeIn();
            $(".num:eq(0)").css("background-color", "#326fc1");
            $(".num:eq(0)").css("color", "#FFFFFF");
            //下一节
            $("#next").click(function () {
              if (currentNode < totalNode) {
                   $(".num").css("display", "none");
                   $(".num:gt(" + (currentNode * ksCount - 1) + "):lt(" + ksCount + ")").fadeIn();
                   ynase(".num:eq(" + (currentNode * ksCount) + ")");
                    currentNode++;
                    currentPage = currentNode * ksCount + 1;
               }
            });
            //上一节
            $("#prev").click(function () {
               if (currentNode > 1) {
                    $(".num").css("display", "none");
                 $(".num:gt(" + (currentNode - 2) * ksCount + "):lt(" + (ksCount - 1) + ")").fadeIn();
                    $(".num:eq(" + (currentNode - 2) * ksCount + ")").fadeIn();
                  ynase(".num:eq(" + (currentNode - 2) * ksCount + ")");
                    currentNode--;
                    currentPage = (currentNode - 2) * ksCount + 1;
                }
            });
            //首页
            $("#first").click(function () {
                if (currentPage != 1) {
                    ynase(".num:eq(0)");
                }
               if (currentNode != 1) {
                    $(".num").css("display", "none");
                    $(".num:lt(" + ksCount + ")").fadeIn();
                   currentNode = 1;
               }
            });
            //末页
          $("#last").click(function () {
                //alert(currentPage);
                if (currentPage != totalPage) {
                    ynase(".num:eq(" + (totalPage - 1) + ")");
               }
               if (currentNode != totalNode) {
                    $(".num").css("display", "none");
                    $(".num:gt(" + ((totalNode - 1) * ksCount - 1) + ")").fadeIn();
                    currentNode = totalNode;
               }
           });            //
       }
   </script>

HTML代码
<div id="rContent">
      <table width="96%" id="conte" ></table>
      <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>
</div>


--------------------------------------------------- 2345王牌技术员联盟、 2345王牌技术员联盟、期待与您交流！---------------------------------------------------------