使用AJAX - LARAVEL逐步显示来自数据库的大量数据

时间:2016-08-15 10:52:37

标签: php jquery mysql ajax laravel

我使用laravel从数据库中获取大量数据(100mil ++数据),但是它给了我错误,因为加载数据的时间太长了,我想使用AJAX来附加数据在Laravel视图中逐渐调用控制器,然后控制器使用LIMIT查询获取数据,因此视图将根据有限的数据逐步显示数据,因此不会超时

控制器:

public function index(){
    return view('users.index',compact('users'));
}

public function loadAjax(){
    // print_r('expression');
    $counter = Input::get('counter');
    $users = User::take(1)->skip($counter)->get();
    return json_encode($users);
}

jquery和AJAX:

<script>
  var ctr = 0;
  window.onload = function () {
    getData();
  };

  window.setInterval(function () {
    ctr++; //increase the data offset
    getData();
  }, 1000);

 function getData() {
        jQuery(document).ready(function() {
            jQuery.ajax({
                url: "users/ajax",
                type: 'GET',
                data: {counter : ctr},
                dataType: "json",
                success: function(data) {
                    console.log(data.users);
                    for(var i =0; i < data.users.length; i++) {
                        var htm = '';
                        htm += '<tr id="inside">'
                        htm +=  '<td>'+data.users[i].id+'</td>';
                        htm +=  '<td>'+data.users[i].name+'</td>';
                        htm +=  '<td>'+data.users[i].email+'</td>';
                        htm += '</tr>'
                        $("#inside").append(htm);
                    }
                },
                error: function(data) { 
                }
            });
        });
    }  
</script>

路线:

Route::get('users/ajax','UserController@loadAjax');

问题是,如果我的方法是正确的方法我是ajax和idk的新手

1 个答案:

答案 0 :(得分:1)

您描述的分页模式称为无限滚动。第一个x记录将加载到页面上,随后的AJAX调用请求更多数据并将其添加到视图中的列表中。这是一个Laracast,其中包含有关实施Infinite Scroll的更多信息。当滚动到达底部时,从onScroll事件触发无限滚动请求。或者,可以使用按钮来触发下一个请求。

请记住,由于客户端内存限制,您将无法在浏览器中显示所有记录。通常,数百万个对象在DOM中不起作用。因此,大型数据集不适合Infinite Scroll。我强烈推荐普通的旧分页。

与AJAX一起使用的开箱即用的分页工具包适用于大型数据集jQuery Datatables。祝你好运。