jquery+ajax怎么實(shí)現(xiàn)分頁(yè)

在加載頁(yè)面的時(shí)候發(fā)出一個(gè)請(qǐng)求，用ajax請(qǐng)求就可以，請(qǐng)求返回結(jié)果是獲取所需要的所有信息，存在一個(gè)js對(duì)象里

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供宣漢企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站建設(shè)、網(wǎng)站制作、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為宣漢眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

//success是請(qǐng)求成功后的返回函數(shù)，msg代表的是服務(wù)端的返回值，也就是你需要的那些信息

可以將這些信息存到ListUser里,然后再將list轉(zhuǎn)成JSONArray返回,msg就是返回值

var?dataObj;

$.ajax({

url:"yourservlet",

type:"POST",

data:"你請(qǐng)求的參數(shù)，隨便填，只要后臺(tái)接收了然后調(diào)用業(yè)務(wù)層進(jìn)行查詢(xún)返回結(jié)果就行",

success:function(msg){

dataObj=msg;

alert("返回成功");

}

});

//之后已經(jīng)獲取到了數(shù)據(jù)到瀏覽器，需要根據(jù)頁(yè)數(shù)來(lái)分頁(yè)，就是遍歷數(shù)組了，dataObj就是一個(gè)

json對(duì)象，根據(jù)你的每頁(yè)數(shù)量和頁(yè)數(shù)來(lái)獲取，這就是思路

jquery datatable如何動(dòng)態(tài)分頁(yè)

一、分頁(yè)

分頁(yè)的基本思想是根據(jù)datatable的頁(yè)碼及每頁(yè)顯示的行數(shù)，將數(shù)據(jù)從數(shù)據(jù)庫(kù)分段提出，然后再填充到表格中，以達(dá)到分頁(yè)的效果。

這里需要用到datatable插件的幾個(gè)屬性：

"sEcho"：這個(gè)屬性需要原封不動(dòng)地傳回給datatable，具體的作用我也不清楚，但是根據(jù)它值的變化情況來(lái)看，好像是一個(gè)操作次數(shù)的計(jì)數(shù)（之前我一直把它當(dāng)做是pageindex來(lái)用，結(jié)果發(fā)現(xiàn)，不論我在datatable中是翻下一頁(yè)還是翻上一頁(yè)，它一直在增加。）

"iDisplayStart"：這個(gè)屬性，根據(jù)字面意思理解，就是每段數(shù)據(jù)開(kāi)始的行數(shù)，比如第一頁(yè)的數(shù)據(jù)就是從0開(kāi)始計(jì)，那么它就是0，每頁(yè)顯示的行數(shù)是10，那么第二頁(yè)的第一行的iDisplayStart就是10。

"iDisplayLength"：這個(gè)屬性就是每頁(yè)顯示的行數(shù)。

然后是數(shù)據(jù)庫(kù)操作，只需要從數(shù)據(jù)庫(kù)查詢(xún)其中一段數(shù)據(jù)，然后輸出出來(lái)，轉(zhuǎn)成JSON格式，讓datatable插件獲取。在網(wǎng)上可以找到很多分頁(yè)的方法，選擇了其中一種，使用row_number()的分頁(yè)的存儲(chǔ)過(guò)程。具體代碼如下(根據(jù)sql創(chuàng)建存儲(chǔ)過(guò)程模板）：

存儲(chǔ)過(guò)程的兩個(gè)參數(shù)，pageindex表示頁(yè)索引即當(dāng)前頁(yè)碼，不懂datatable有沒(méi)有這項(xiàng)屬性，所以是用計(jì)算的方法得來(lái)的，就是iDisplayStart/iDisplayLength+1。pagesize可以直接從datatable獲得。

服務(wù)端的代碼，我創(chuàng)建了一個(gè)datasource.ashx文件，代碼如下：

DataTableToObjects類(lèi)的代碼如下：

需要注意的一點(diǎn)：iTotalRecords與iTotalDisplayRecords是兩個(gè)不同的值，是改變分頁(yè)欄顯示用的參數(shù)，這里因?yàn)闆](méi)有考慮數(shù)據(jù)過(guò)濾功能，所以都設(shè)置成數(shù)據(jù)的總的行數(shù)。

然后是客戶(hù)端的代碼，與之前的差不多：

因?yàn)闇y(cè)試，所以只提取了表中的三個(gè)字段，并且關(guān)閉了數(shù)據(jù)過(guò)濾及排序功能，其中，"bLengthChange"可以設(shè)置成true，因?yàn)榉?wù)端會(huì)獲取datatable的iDisplayLenth參數(shù)，即使每頁(yè)顯示數(shù)變化，數(shù)據(jù)也可以正常獲取。

這樣就實(shí)現(xiàn)了jquery.datatable插件的服務(wù)端分頁(yè)獲取數(shù)據(jù)。

jquery怎么動(dòng)態(tài)實(shí)現(xiàn)表格分頁(yè)

jquery動(dòng)態(tài)實(shí)現(xiàn)表格分頁(yè)的方法是利用自帶的分頁(yè)插件jQuery.page.js。

下面是使用方法：

$(".tcdPageCode").createPage({

? pageCount:10,

? current:1,

? backFn:function(p){

? ? ? //單擊回調(diào)方法，p是當(dāng)前頁(yè)碼

? }

});

pageCount：總頁(yè)數(shù)

current：當(dāng)前頁(yè)

實(shí)現(xiàn)分頁(yè)的tab如下：

div class="tcdPageCode"

span class="disabled"上一頁(yè)/span

span class="current"1/span

a href="javascript:;" class="tcdNumber"2/a

a href="javascript:;" class="tcdNumber"3/a

a href="javascript:;" class="tcdNumber"4/a

span.../span

a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一頁(yè)/a/div

實(shí)現(xiàn)效果：