迭代 json 数组，拆分然后一次显示在 5 个集合中（Laravel、Ajax、Carbon）

Question

As a newbie developer its taken me a while of searching high and low before deciding to post for help, i dont quite fully understand the right syntax phrases to search for i guess so im not finding the right solution.

In a basic explaination: Im using laravel and Carbon to display dates for the next 60 days from now, Carbon returns the dates just fine and laravel returns the response in a json format something like this:

  0: "Tuesday 10th May 2016 "
  1: "Wednesday 11th May 2016"
  2: "Thursday 12th May 2016"

And so on.... So in my html i have a div that contains 5 results, However i need to be able to use something like a jQuery onclick function to loadMore results from the json array maybe using splice.

Laravel has the pagination option but it doesnt work on arrays and ive tried virtually everything i can find online to try and get a way to split the array of 60 days into chunks of 5 so when using an onLoad function, the html will be swopped out with the new 5 results.

here is my current onLoad function:

    $.ajax({
    crossOrigin: true,
    url: '/dates',
    success: function(data) {
        $(".newdates").html('').append(data);
    }
}); 

and ive also tried the following, The only issue here is that is loads the same 3 spliced results as i need some kind of pagination way or similar to how jquery DataTables works.

    $.ajax({
    crossOrigin: true,
    url: '/dates',
    success: function(data) {
        $.each(data.slice(0,3), function(i, item) {
            console.log(item);
        });
    }
});

My hoped for outcome would be!

In the html view:

Day 1
Day 2
Day 3
Day 4
Day 5

(Load More) <-- Onclick hide the current 5 and show the next 5 available dates.

First 5 days are now hidden from the view
Day 6
Day 7
Day 8
Day 9
Day 10

And the same Load More function will be available agai

Hope i can find a workaround, Thanks for your time its much apprecaited, Im sure i will get there in the end.

Answer 1

If you want to paginate only on the client side, you can save that data in a variable so you don't have to fetch the data again. Besides, you can create a function to paginate and always call it when needed. You should search for a plugin that already deals with pagination (unfortunately I haven't used only client side pagination, so I don't know any up to date plugin).

 var myData = {}; var pageNumber = 1; var ITENS_PER_PAGE = 3; $.ajax({ crossOrigin: true, url: '/dates', success: function(data) { myData = data; console.log(paginate(myData, pageNumber, ITENS_PER_PAGE)); } }); function paginate(data, pageNumber, itensPerPage) { return data.slice((pageNumber - 1) * itensPerPage, itensPerPage); } function loadMore() { pageNumber++; console.log(paginate(myData, pageNumber, ITENS_PER_PAGE)); }