我有一个模块,其中我使用分页js插件将数据显示为列表
这是我当前的脚本:但是使用此脚本,它将从我的数据库中加载所有数据。
var dataContainer = $('.latest_articles')
$('#pagenation').pagination({
dataSource: function(done) {
$.ajax({
type: 'GET',
url: '/api/dropdownModuleFiles/getall/'+id,
dataType:'JSON',
beforeSend: function() {
dataContainer.html('Loading data ...');
},
success: function(response) {
done(response);
}
});
},
locator: 'items',
totalNumberLocator: function(response) {
// you can return totalNumber by analyzing response content
return Math.floor(Math.random() * (1000 - 100)) + 100;
},
pageSize: 10,
cssStyle: 'light-theme',
callback: function(data, pagination) {
var html = simpleTemplate(data);
dataContainer.html(html);
}
})
function simpleTemplate(data) {
var fileHtml = '<article class="grid_post" id="article_files">';
$.each(data, function(index, item){
var ext = (item.dropdownFileUrl).split('.').pop();
if(ext == 'pdf'){
fileHtml+='<figure>'+
'<figcaption>'+
'<h4 class="grid_post_title">'+item.dropdownFileTitle+'</h4>'+
'<div class="element-block">'+
'<a target="_blank" href="'+item.dropdownFileUrl+'" class="btn link-btn btn-outline btn-rounded">Click here ⇾</a>'+
'</div>'+
'</figcaption>'+
'</figure>';
}
});
fileHtml += '</article>';
return fileHtml;
}
因为它从我的数据库分页加载了所有数据,所以看起来像这样。
<< 1 2 3 4 ..... 10 >>
但是当我将查询限制为10个分页时,只会看起来像这样
<< 1 >>
它会根据我的查询影响分页。我想要实现的是显示前10个数据,但分页将根据要加载的数据显示。然后当我单击next / prev按钮或数字时,它将调用ajax请求以加载next / prev 10