簡體   English   中英

迭代 json 數組,拆分然后一次顯示在 5 個集合中(Laravel、Ajax、Carbon)

[英]iterate json array, split and then display in collections of 5 at a time (Laravel, Ajax, Carbon)

作為一名新手開發人員,在決定發帖尋求幫助之前,我花了一些時間進行高低搜索,我不太完全理解要搜索的正確語法短語,所以我想我沒有找到正確的解決方案。

在一個基本的解釋中:我使用 laravel 和 Carbon 來顯示從現在起接下來 60 天的日期,Carbon 返回日期就好了,laravel 以這樣的 json 格式返回響應:

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

等等.... 所以在我的 html 中,我有一個包含 5 個結果的 div,但是我需要能夠使用類似 jQuery onclick 函數的東西從 json 數組中加載更多結果,也許使用 splice。

Laravel 有分頁選項,但它不適用於數組,我嘗試了幾乎所有我可以在網上找到的方法來嘗試將 60 天的數組拆分為 5 個塊,因此在使用 onLoad 函數時,html 將被刪除與新的 5 個結果。

這是我當前的 onLoad 函數:

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

我也嘗試了以下方法,這里唯一的問題是加載相同的 3 個拼接結果,因為我需要某種分頁方式或類似於 jquery DataTables 的工作方式。

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

我希望的結果是!

在 html 視圖中:

Day 1
Day 2
Day 3
Day 4
Day 5

(加載更多) <-- Onclick 隱藏當前 5 並顯示接下來的 5 個可用日期。

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

同樣的加載更多功能將再次可用

希望我能找到解決方法,感謝您抽出寶貴的時間,我相信我最終會到達那里。

如果您只想在客戶端進行分頁,您可以將該數據保存在一個變量中,這樣您就不必再次獲取數據。 此外,您可以創建一個函數來分頁並在需要時始終調用它。 你應該搜索一個已經處理分頁的插件(不幸的是我沒有只使用客戶端分頁,所以我不知道任何最新的插件)。

 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)); }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM