layerページングの使用
6225 ワード
Layuiはページングのコンポーネントを提供し、簡単な構成でページングの効果を得ることができます.
上のコード:
ここのコードを少し説明します:1、ボタン#searchBtnをクリックしてajax要求を開始してページングする必要があるデータを取得します.2、successが成功した後、コールバックしてページング+パッチを実行する.3、必須コード
4、1ページに表示するバー数numを定義し、renderメソッドを定義し、シミュレーションレンダリングを行う.5、jumpジャンプを実現
上のコードは直接使えますが、オブジェクトを変更するだけです.
あなたに役に立つことを望みます!Author: Allen Time: 2017/3/12 17:09
上のコード:
//
//
$('#searchBtn').click(function(){
var html = '';
$.ajax({
type:"GET",
url:"data/tsResult.json",
success:function(TS){
//
//
layui.use(['laypage','layer'],function(){
var laypage = layui.laypage,
layer = layui.layer;
var num = 7;//
//
var render = function(curr){//
var html = '',
last = curr*num-1;//
last = last >= TS.length?(TS.length-1):last;
for(var i=(curr*num-num); i<=last; i++){
//
html += ''+
'4%">'+TS[i].id+''+
'8%">'+TS[i].COMPNAME+''+
'12%">'+TS[i].COMTELPHONE+''+
'16%">'+TS[i].COMPCARD+''+
'8%">'+TS[i].DJRQ_S+''+
'8%">'+TS[i].COMTYPE+''+
'28%">'+TS[i].COMCONTEXT+''+
'8%">'+TS[i].STATE+''+
'8%" style="text-align:center;">+TS[i].btn+''+
'';
}
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、ボタン#searchBtnをクリックしてajax要求を開始してページングする必要があるデータを取得します.2、successが成功した後、コールバックしてページング+パッチを実行する.3、必須コード
layui.use(['laypage','layer'],function(){
var laypage = layui.laypage,
layer = layui.layer;
}
4、1ページに表示するバー数numを定義し、renderメソッドを定義し、シミュレーションレンダリングを行う.5、jumpジャンプを実現
上のコードは直接使えますが、オブジェクトを変更するだけです.
あなたに役に立つことを望みます!Author: Allen Time: 2017/3/12 17:09