Как вызвать AJAX-запрос каждый раз, когда кнопка нажата на пагинации JS - PullRequest
Новая
       9

Как вызвать AJAX-запрос каждый раз, когда кнопка нажата на пагинации JS

0 голосов
/ 27 ноября 2018

У меня есть модуль, в котором я отображаю свои данные в виде списка, используя плагин js plugin

Вот мой текущий скрипт: но с этим скриптом он загружает все данные из моей базы данных. 

   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

...