Question

作为一名新手开发者，在决定发帖寻求帮助之前我花了一些时间搜索高低，我不完全理解正确的语法短语来搜索我猜所以我找不到合适的解决方案。

在一个基本的解释中：我使用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

（加载更多）＆lt; - Onclick隐藏当前的5并显示接下来的5个可用日期。

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

同样的加载更多功能将可用于

希望我能找到一个解决方法，感谢你的时间非常适合，我相信我最终会到达那里。

Answer 1

如果只想在客户端进行分页，可以将该数据保存在变量中，这样就不必再次获取数据了。此外，您可以创建一个分页功能，并在需要时始终调用它。你应该搜索一个已经处理分页的插件（遗憾的是我还没有使用客户端分页，所以我不知道任何最新的插件）。

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

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

1 个答案: