每次单击分页js时如何调用ajax请求

时间:2018-11-27 08:04:13

标签: jquery ajax pagination

我有一个模块,其中我使用分页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个数据,但分页将根据要加载的数据显示。然后当我单击next / prev按钮或数字时,它将调用ajax请求以加载next / prev 10

0 个答案:

没有答案