查詢所有數據在前端用js進行分頁處理不再次走資料庫

從後台一次查詢所有數據，在前端用js進行分頁處理，不再次走資料庫

顯示第 1 到第 10 條記錄，總共 條記錄 每頁顯示 3 6 14 100 條記錄

把這段代碼放大你空白頁面中。效果是：

這事沒有加入上面提到js前的效果。

js代碼：

/** * 顯示每頁開始數據到結束數據編號 * @param currentPage 當前頁數（第一次查詢最好是【1】） */var fileData;function showDataNumber(currentPage){ var endNumber =currentPage * $("#selectPage").val(); $("#endPageNumber").text(" "+endNumber); var startNumber = (currentPage-1)*$("#selectPage").val()+1 $("#startPageNumber").text(" "+startNumber); if(fileData == null ){ $("#taTalDataNumber").text(" "+0); }else{ $("#taTalDataNumber").text(" "+fileData.length); }}

這段代碼中【fileData 】存儲著從後台查詢出來的所有數據，數據格式JSON，我把它寫到全局裡面了

fileData格式是：

在顯示下數據中對象的屬性有哪些：

接下來是獲取每頁數據

/** * 獲取本頁數據 * @param currentPage 當前頁數 【初次查數據，默認第1頁】 */function getPageData(currentPage){ if (typeof (fileData) != "undefined" && fileData != null) { //計算每頁數據起始和終止數據編號 var pageNumber = $("#selectPage").val() var maxLength = currentPage * pageNumber - 1; var minLength = currentPage * pageNumber - pageNumber; var pageData = []; for (var i = minLength; i < fileData.length; i++) { if (maxLength < i) { break; } else { pageData.push(fileData[i]); } } htmlData(pageData); }else{ //把空數據傳到頁面中去 htmlData(fileData); }}

代碼中的函數【htmlData(pageData)】是把處理後的數據寫到頁面中去，是我在js中拼接的html代碼（顯low了點）

function htmlData(fileDataS){ $(".main").html(""); if(fileDataS == null){ $(".main").html(""); $( .M-box ).hide(); }else{ $( .M-box ).show(); $.each(fileDataS,function (index,file){ var html =

+file.fileName+ + 所屬項目： +file.projectId+ 下載次數：【下載"+file.downloadNumber+ 次】 + 所屬文件庫：建設批覆文件" + 項目年份：2016 + 更新時間： +dateHandle(file.createtime) + 下載

$(".main").append(html); }); }}

其中的html標籤中class引用的是本公司內部的樣式，借鑒的可以把它們刪除掉

大招來了，初始化分頁數據

/** * 分頁控制項處理 */function page() { if (typeof (fileData) != "undefined" && fileData != null) { var totalData = fileData.length; var showData = $("#selectPage").val(); if(showData > totalData){ showData = totalData; } $( .M-box ).pagination({ totalData: totalData, showData: showData, coping: true, callback: function (index) { //改變顯示開始和結束數據編號 showDataNumber(index.getCurrent()); getPageData(index.getCurrent()); } }); }}

還有一個下拉選擇框沒有寫

/** * 選擇每頁顯示數據條數 */function select(){ $("#endPageNumber").text(" "+$("#selectPage").val()) initSelect();}/** * 初始化選擇每頁顯示數據 */function initSelect(){ showDataNumber(1); getPageData(1); page();}

每次選擇每頁顯示數據都會跳轉第一頁，然後在計算分頁數據和每頁顯示的條數

在來張成功的圖片

$.ajax({ url: , type: POST , data: , dataType: "json", success:function (data){ fileData =data; console.log(fileData); showDataNumber(1);//初始化每頁到開始到結束數據編號 getPageData(1);//初始化第一頁的數據 page();//初始化分頁 } });

傳自己的url和數據吧，提交方式不限

到此這個在js分頁寫完了，在各位前端工程師，使用過程中出現的錯誤，請及時告訴我，我有空閑時間盡最大的努力幫助你們解決

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！