layerページングの使用


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 += ''+
                                        '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