jQuery中l(wèi)ayer分頁(yè)器的使用
layui給我們提供了分頁(yè)器的組件,進(jìn)行簡(jiǎn)單的配置就能做出分頁(yè)的效果
上代碼:
// 點(diǎn)擊查詢(xún)按鈕 開(kāi)始顯示表格內(nèi)容
// 如果查詢(xún)內(nèi)容不存在 則顯示為空
$('#searchBtn').click(function(){
var html = '';
$.ajax({
type:"GET",
url:"data/tsResult.json",
success:function(TS){
// 拿到投訴案件數(shù)據(jù)
// 分頁(yè)器
layui.use(['laypage','layer'],function(){
var laypage = layui.laypage,
layer = layui.layer;
var num = 7;//每一頁(yè)出現(xiàn)的數(shù)據(jù)量
// 模擬渲染
var render = function(curr){//當(dāng)前頁(yè)
var html = '',
last = curr*num-1;//當(dāng)前頁(yè)的最后一行數(shù)據(jù)的下標(biāo)
last = last >= TS.length?(TS.length-1):last;
for(var i=(curr*num-num); i<=last; i++){
// 從未顯示的第一行開(kāi)始
html += '<tr>'+
'<td width="4%">'+TS[i].id+'</td>'+
'<td width="8%">'+TS[i].COMPNAME+'</td>'+
'<td width="12%">'+TS[i].COMTELPHONE+'</td>'+
'<td width="16%">'+TS[i].COMPCARD+'</td>'+
'<td width="8%">'+TS[i].DJRQ_S+'</td>'+
'<td width="8%">'+TS[i].COMTYPE+'</td>'+
'<td width="28%">'+TS[i].COMCONTEXT+'</td>'+
'<td width="8%">'+TS[i].STATE+'</td>'+
'<td width="8%" style="text-align:center;"><button class="layui-btn doBtn">'+TS[i].btn+'</button></td>'+
'</tr>';
}
return html;
};
laypage({
cont:'demo4',
pages:Math.ceil(TS.length/num),
first:false,
last: false,
jump:function(obj){
document.getElementById('TS-list').innerHTML = render(obj.curr);
}
});
});
}
});
});
稍微解釋一下這邊的代碼:
1、點(diǎn)擊按鈕#searchBtn 發(fā)起ajax請(qǐng)求 獲得需要分頁(yè)的數(shù)據(jù)。
2、success成功后回調(diào)執(zhí)行分頁(yè)+拼接。
3、必須代碼
layui.use(['laypage','layer'],function(){
var laypage = layui.laypage,
layer = layui.layer;
}
4、定義一頁(yè)需要顯示的條數(shù)num,定義render方法,進(jìn)行模擬渲染。
5、jump實(shí)現(xiàn)跳轉(zhuǎn)
上面的代碼是直接可以用的,只需要改一下對(duì)象
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- 基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)控件
- 基于JQuery的Pager分頁(yè)器實(shí)現(xiàn)代碼
- jQuery中jqGrid分頁(yè)實(shí)現(xiàn)代碼
- jQuery Pagination Ajax分頁(yè)插件(分頁(yè)切換時(shí)無(wú)刷新與延遲)中文翻譯版
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
- 基于jQuery的js分頁(yè)代碼
- 基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
- jQuery前端分頁(yè)示例分享
相關(guān)文章
jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)
jQuery九宮格大轉(zhuǎn)盤(pán)抽獎(jiǎng)代碼網(wǎng)頁(yè)特效,點(diǎn)擊抽獎(jiǎng)按鈕開(kāi)始隨機(jī)抽獎(jiǎng)選擇獎(jiǎng)品,可設(shè)置起點(diǎn)位置、獎(jiǎng)品數(shù)量、轉(zhuǎn)動(dòng)次數(shù)、中獎(jiǎng)位置參數(shù)2015-11-11
Web 前端設(shè)計(jì)模式--Dom重構(gòu) 提高顯示性能
首頁(yè)那邊有一個(gè)產(chǎn)品瀏覽的版塊在延遲載入的時(shí)候,將我所有的隱藏幀的項(xiàng)都顯示出來(lái),因?yàn)槁龑?dǎo)致頁(yè)面變形。2010-10-10
jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層完整代碼
使用jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層的完整代碼,復(fù)制保存到html文件就可以體驗(yàn)效果.光標(biāo)移動(dòng)到層上,按住鼠標(biāo)就可以拖動(dòng)層2013-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)提示信息的地圖熱點(diǎn)效果
這是一個(gè)升級(jí)版本,更新了一個(gè)在IE8里的小問(wèn)題,加入了提示框的內(nèi)容自動(dòng)換行處理(北京點(diǎn)上有演示)!估計(jì)差不多該是最后樣式了。IE6、IE8、谷歌、火狐、測(cè)試正常。2015-04-04
關(guān)于setInterval、setTimeout在jQuery中的使用注意事項(xiàng)
最近碰到個(gè)問(wèn)題,在使用jquery寫(xiě)定時(shí)器時(shí),總是會(huì)出現(xiàn)fn不存在的錯(cuò)誤提示2011-09-09

