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