繁体   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