jquery - 每次按钮单击分页js时如何调用ajax请求

Question

我有一个模块，我在其中使用分页 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 &#8702;</a>'+
                            '</div>'+
                        '</figcaption>'+
                    '</figure>';  
                }
            });
              fileHtml += '</article>';
            return fileHtml;
        }

因为它从我的数据库分页加载所有数据看起来像这样。

<<  1 2 3 4 ..... 10 >>

但是当我将查询限制为 10 时，分页只会看起来像这样

<< 1 >>

它会根据我的查询影响分页。我想要实现的是显示前 10 个数据，但分页将根据要加载的数据量显示。然后当我单击下一个/上一个按钮或数字时，它将调用 ajax 请求以加载下一个/上一个 10

标签： jqueryajaxpagination