The use of layer pager in jQuery

  • 2021-08-03 08:54:22
  • OfStack

layui provides us with pager components, simple configuration can make the effect of pagination

On the code:


//  Click the query button   Start displaying table contents 
//  If the query content does not exist   Is displayed as empty 
$('#searchBtn').click(function(){
  var html = '';
  $.ajax({
    type:"GET",
    url:"data/tsResult.json",
    success:function(TS){
      //  Get complaint case data 
      //  Pageizer 
      layui.use(['laypage','layer'],function(){
        var laypage = layui.laypage,
        layer = layui.layer;

        var num = 7;// Every 1 The amount of data that appears on the page 
        //  Analog rendering 
        var render = function(curr){// Current page 
          var html = '',
            last = curr*num-1;// At the end of the current page 1 Subscript of row data 
            last = last >= TS.length?(TS.length-1):last;
            for(var i=(curr*num-num); i<=last; i++){
              //  The first that has never been displayed 1 Line start 
              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);
          }
        });
      });
    }
  });
});

Explain the code here a little bit:

1. Click the button # searchBtn to initiate ajax request to obtain the data to be paged.

2. After success is successful, call back to perform paging + splicing.

3. Must code


layui.use(['laypage','layer'],function(){
        var laypage = layui.laypage,
        layer = layui.layer;
        }

4. Define the number of num to be displayed on one page, define render method, and simulate rendering.

5. jump realizes jump

The above code can be used directly, only need to change 1 object


Related articles: