<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>滾動到頁面頂部加載</title>
  <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
  <script src="js/endlesspage.js" type="text/javascript"></script>
   <style type="text/css">
      .mainDiv {
        width: 800px;
        border: solid 1px #f00;
        padding: 10px;
      }
      .item {
        width: 600px;
        height: 50px;
        border: solid 1px #00ff90;
        font-size: 12px;
        margin: 10px;
      }
      .title {
        font-size: 16px;
        line-height: 20px;
      }
      .content {
        line-height: 14px;
      }
      .alink
      {
        display:none;
      }
      .loaddiv
      {
        display:none;
      }
   </style>
</head>
<body>
  <h1>滾動測試</h1>
  <div class="mainDiv">
    <!--<div class="item">
      <div class="title">title</div>
      <div class="content">content content content content content content content</div>
    </div>
    -->
  </div>
  <div class="loaddiv">
    <img src="images/loading.gif" />
  </div>
  <div>
    <a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>
  </div>
</body>
</html>

/*endlesspage.js*/
var gPageSize = 10;
var i = 1; //設(shè)置當(dāng)前頁數(shù)，全局變量
$(function () {
  //根據(jù)頁數(shù)讀取數(shù)據(jù)
  function getData(pagenumber) {
    i++; //頁碼自動增加，保證下次調(diào)用時為新的一頁。
    $.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
      if (data.length > 0) {
        var jsonObj = JSON.parse(data);
        insertDiv(jsonObj);
      }
    });
    $.ajax({
      type: "post",
      url: "/ajax/Handler.ashx",
      data: { pagesize: gPageSize, pagenumber: pagenumber },
      dataType: "json",
      success: function (data) {
        $(".loaddiv").hide();
        if (data.length > 0) {
          var jsonObj = JSON.parse(data);
          insertDiv(jsonObj);
        }
      },
      beforeSend: function () {
        $(".loaddiv").show();
      },
      error: function () {
        $(".loaddiv").hide();
      }
    });
  }
  //初始化加載第一頁數(shù)據(jù)
  getData(1);
  //生成數(shù)據(jù)html,append到div中
  function insertDiv(json) {
    var $mainDiv = $(".mainDiv");
    var html = '';
    for (var i = 0; i < json.length; i++) {
      html += '<div class="item">';
      html += ' <div class="title">' + json[i].rowId + '  ' + json[i].D_Name + '</div>';
      html += ' <div class="content">' + json[i].D_Name + '  ' + json[i].D_Password + '</div>';
      html += '</div>';
    }
    $mainDiv.append(html);
  }
  //==============核心代碼=============
  var winH = $(window).height(); //頁面可視區(qū)域高度
  var scrollHandler = function () {
    var pageH = $(document.body).height();
    var scrollT = $(window).scrollTop(); //滾動條top
    var aa = (pageH - winH - scrollT) / winH;
    if (aa < 0.02) {//0.02是個參數(shù)
      if (i % 10 === 0) {//每10頁做一次停頓！
        getData(i);
        $(window).unbind('scroll');
        $("#btn_Page").show();
      } else {
        getData(i);
        $("#btn_Page").hide();
      }
    }
  }
  //定義鼠標(biāo)滾動事件
  $(window).scroll(scrollHandler);
  //==============核心代碼=============
  //繼續(xù)加載按鈕事件
  $("#btn_Page").click(function () {
    getData(i);
    $(window).scroll(scrollHandler);
  });
});

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
using System.Data;
using MSCL;
using Newtonsoft.Json;
public class Handler : IHttpHandler {
  public void ProcessRequest(HttpContext context)
  {
    //核心處理程序
    string pageSize = context.Request["pagesize"];
    string pageIndex = context.Request["pagenumber"];
    if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))
    {
      context.Response.Write("");
    }
    else
    {
      //請結(jié)合實際自行取分頁數(shù)據(jù)，可調(diào)用分頁存儲過程
      MSCL.PageHelper p = new PageHelper();
      p.CurrentPageIndex = Convert.ToInt32(pageIndex);
      p.FieldsName = "*";
      p.KeyField = "d_id";
      p.SortName = "d_id asc";
      p.TableName = "testtable";
      p.EndCondition = "count(*)";
      p.PageSize = Convert.ToInt32(pageSize);
      DataTable dt = p.QueryPagination();
      string json = JsonConvert.SerializeObject(dt, Formatting.Indented);
      context.Response.Write(json);
    }
  }
  public bool IsReusable {
    get {
      return false;
    }
  }
}

[
 {
  "rowId": 1,
  "D_Id": 1,
  "D_Name": "名稱1",
  "D_Password": "密碼測試1",
  "D_Else": "其他1"
 },
 {
  "rowId": 2,
  "D_Id": 2,
  "D_Name": "名稱2",
  "D_Password": "密碼測試2",
  "D_Else": "其他2"
 },
 {
  "rowId": 3,
  "D_Id": 3,
  "D_Name": "名稱3",
  "D_Password": "密碼測試3",
  "D_Else": "其他3"
 },
 {
  "rowId": 4,
  "D_Id": 4,
  "D_Name": "名稱4",
  "D_Password": "密碼測試4",
  "D_Else": "其他4"
 },
 {
  "rowId": 5,
  "D_Id": 5,
  "D_Name": "名稱5",
  "D_Password": "密碼測試5",
  "D_Else": "其他5"
 },
 {
  "rowId": 6,
  "D_Id": 6,
  "D_Name": "名稱6",
  "D_Password": "密碼測試6",
  "D_Else": "其他6"
 },
 {
  "rowId": 7,
  "D_Id": 7,
  "D_Name": "名稱7",
  "D_Password": "密碼測試7",
  "D_Else": "其他7"
 },
 {
  "rowId": 8,
  "D_Id": 8,
  "D_Name": "名稱8",
  "D_Password": "密碼測試8",
  "D_Else": "其他8"
 },
 {
  "rowId": 9,
  "D_Id": 9,
  "D_Name": "名稱9",
  "D_Password": "密碼測試9",
  "D_Else": "其他9"
 },
 {
  "rowId": 10,
  "D_Id": 10,
  "D_Name": "名稱10",
  "D_Password": "密碼測試10",
  "D_Else": "其他10"
 }
]

PS：這里還涉及json格式數(shù)據(jù)的交互操作，關(guān)于json數(shù)據(jù)操作小編推薦幾個本站的在線工具供大家參考，相信在以后的開發(fā)中可以派上用場：

在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

C語言風(fēng)格/HTML/CSS/json代碼格式化美化工具：
http://tools.jb51.net/code/ccode_html_css_json

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: