前端滑動分頁獲取資料(jQuery)

2022-09-13 12:42:11 字數 1361 閱讀 9479

最近在做的乙個專案的時候用到滑動分頁請求資料的方式,正好整理一下寫成部落格,留作記錄。

原理:當滾動條滑動到距離頁面底部時候一定距離(距離自己設定)的時候,進行資料請求,再資料請求的時候為了防止滑動再次觸發請求資料的函式時,我們需要設立乙個flag,根據情況設定flag的true或false的值,

首先設定兩個全域性的引數
var flag;   // flag為true的時候可以滑動請求,否則說明資料沒有那麼多

var num; // 資料請求時的第幾頁,預設從0開始

頁面初始化
$(function() )
然後寫請求資料的函式
// 請求資料的函式,引數num為請求第幾頁,動態傳入

function getdata(num) ,

datatype: "json",

success: function (res)

// 假設後台一次返回資料10條

if(res.data.length == 10)

// 輸出資料

console.log(res.data);}})

}

獲取滾動條距離頁面底部的距離
滾動條距離頁面底部的距離是通過文件實際高度減去可視視窗的高度減去滾動條的高度,那我們就要獲取這個三個的高度

// 獲取文件內容實際高度

function getdocumentheight()

function getclientheight()  

return clientheight;

}

function getscrollheight()else if(document.body)  

return scrolltop;

}

// 視窗可視範圍的高度

var wheight=getclientheight();

// 視窗滾動條高度

var sheight=getscrolltop();

// 獲取文件內容實際高度

var dheight=getscrollheight();

// 滾動條距離底部的高度

var bheight=dheight-wheight-sheight;

// 如果高度小於自己設定的值時並且flag為true時,可以呼叫請求資料的函式,請求更多的資料

if(bheight < 100 && flag)

springboot 獲取前端json資料幾種方法

後端用 requestparam 或者servlet 獲取引數。後端用 rquestbody 獲取引數,或者 requestparam獲取。pathvariable 一般我們使用uri template樣式對映時用,即url 這種形式,也就是一般我們使用的get,delete,put方法會使用到的,...

關於jqgrid獲取分頁全部資料

我們通常獲取資料使用的方法為 commonlist2 jqgrid getrowdata 通過這種方式只能獲取當前頁的全部資料,並不能獲取翻頁後的資料。如果需要獲取全部資料的方式,可以利用修改頁面最大顯示條數,全部載入後,再獲取。var rownum commonlist2 jqgrid getgr...

js 獲取後台資料分頁

頁面建立乙個存放內容的容器,以及分頁的容器 div id content div div id pager div 頁面js 如下 ajax 如果需要 type get datatype json success function result error function error 建立乙個空的...