Layui provides us with components of the paginator, which can create pagination effects by simply configuring it.
On code:
// Click the query button to start displaying the table contents// If the query content does not exist, it will be displayed as empty$('#searchBtn').click(function(){
var html = '';
$.ajax({
type:"GET",
url:"data/",
success:function(TS){
// Get the complaint case data // Paging device (['laypage','layer'],function(){
var laypage = ,
layer = ;
var num = 7;//The amount of data appears on each page // Simulate rendering var render = function(curr){//Current page var html = '',
last = curr*num-1;//Subscript of the last row of data on the current page last = last >= ?(-1):last;
for(var i=(curr*num-num); i<=last; i++){
// Start with the first line that is not displayed 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:(/num),
first:false,
last: false,
jump:function(obj){
('TS-list').innerHTML = render();
}
});
});
}
});
});
Let's explain the code here a little:
1. Click the button #searchBtn to initiate ajax request to obtain the data that needs to be paging.
2. After success, the callback executes pagination + stitching.
3. Must code
(['laypage','layer'],function(){
var laypage = ,
layer = ;
}
4. Define the number of num that needs to be displayed on a page, define the render method, and perform simulation rendering.
5. Jump achieves jump
The above code is directly useful, you only need to change the object
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.