Jquery automatically loads the text list through Ajax at the bottom of the page, similar to the lazy image loading effect, with loading effect,

Jquery automatically loads the text list through Ajax at the bottom of the page, similar to the lazy image loading effect, with loading effect,

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
/* Endlesspage. js */var gPageSize = 10; var I = 1; // set the current page number, global variable $ (function () {// read data function getData (pagenumber) based on the page number) {I ++; // the page number is automatically added to ensure that the next call is a new page. $. 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 () ;}}) ;}// initialize and load the first page of Data getData (1); // generate the data html and append it to function insertDiv (json) in the div) {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 );} // ===================== core code ================ var winH =$ (window ). height (); // The height of the visible area of the page var scrollHandler = function () {var pageH = $ (document. body ). height (); var scrollT = $ (window ). scrollTop (); // The top var aa = (pageH-winH-scrollT)/winH; if (aa <0.02) {// 0.02 is a parameter. If (I % 10 = 0) {// pause every 10 pages! GetData (I); $ (window ). unbind ('scroll '); $ ("# btn_Page "). show () ;}else {getData (I); $ ("# btn_Page "). hide () ;}}// defines the mouse scroll event $ (window ). scroll (scrollHandler ); // ==================== core code ======================/// Continue loading button event $ (" # 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) {// core Handler string pageSize = context. request ["pagesize"]; string pageIndex = context. request ["pagenumber"]; if (string. isNullOrEmpty (pageSize) | string. isNullOrEmpty (pageIndex) {context. response. write ("");} else {// retrieve the paging data based on actual conditions. You can call the paging Stored Procedure 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": "name 1", "D_Password": "password Test 1", "D_Else ": "Other 1" },{ "rowId": 2, "D_Id": 2, "D_Name": "name 2", "D_Password": "password Test 2 ", "D_Else": "other 2" },{ "rowId": 3, "D_Id": 3, "D_Name": "Name 3", "D_Password ": "password Test 3", "D_Else": "other 3" },{ "rowId": 4, "D_Id": 4, "D_Name": "name 4 ", "D_Password": "password Test 4", "D_Else": "other 4" },{ "rowId": 5, "D_Id": 5, "D_Name ": "Name 5", "D_Password": "password Test 5", "D_Else": "other 5" },{ "rowId": 6, "D_Id": 6, "D_Name": "name 6", "D_Password": "password Test 6", "D_Else": "other 6" },{ "rowId": 7, "D_Id ": 7, "D_Name": "name 7", "D_Password": "password Test 7", "D_Else": "other 7" },{ "rowId": 8, "D_Id": 8, "D_Name": "name 8", "D_Password": "password Test 8", "D_Else": "Other 8" },{ "rowId ": 9, "D_Id": 9, "D_Name": "name 9", "D_Password": "password test 9", "D_Else": "Other 9 "}, {"rowId": 10, "D_Id": 10, "D_Name": "name 10", "D_Password": "password test 10", "D_Else ": "Other 10"}]