この記事では主に jQuery でのレイヤー パジネーターのテクニックを紹介します。必要な方はぜひ参考にしてください。
layui は、簡単な設定でページング効果を作成するために使用できるページング コンポーネントを提供します
上記のコード:
// 点击查询按钮 开始显示表格内容 // 如果查询内容不存在 则显示为空 $('#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 += '<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 ボタンをクリックします。 #searchBtn は、ページネーションが必要なデータを取得するための ajax リクエストを開始します。
2. 成功後、コールバックが実行され、ページングとスプライシングが実行されます。
3. 必須コード
layui.use(['laypage','layer'],function(){ var laypage = layui.laypage, layer = layui.layer; }
4. ページに表示する必要があるアイテムの数 num を定義し、レンダリング メソッドを定義し、シミュレートされたレンダリングを実行します。
5. Jump の実装
上記のコードは、オブジェクトを変更するだけで直接使用できます。
関連する推奨事項:
php はページャーを書き換えます CLinkPager のサンプル コードを共有します
javascript - 初心者がプロジェクトで sg のページャーを模倣します アドバイスをお願いします
以上がjQueryのレイヤーページネータの例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。