skip to Main Content

I am fetching data with all() method in Laravel and passing it to view, where I update the page data through ajax without refreshing the page, so the problem is the page is working fine with small data like 300 – 1000 / but when records are increasing like more then 3000, the reload takes more time. for 3000 data it to 4 mins to load,

I tried to fetch data through limits but when I use where() clause and get() method / the ajax is not working then, (not updating data).

2

Answers


  1. can you try it into controller

    public function getAjaxData(Request $request)
    {
        $pageSize = $request->input('pageSize', 10);
        $data = YourModelName::paginate($pageSize);
    
        return response()->json($data);
    }
    

    and view file ajax is

    dataSource: {
                load: function(loadOptions) {
                    var deferred = $.Deferred();
                    $.ajax({
                        url: "{{ route('getAjaxData') }}",
                        dataType: "json",
                        data: {
                            pageSize: loadOptions.take,
                            page: (loadOptions.skip / loadOptions.take) + 1
                        },
                        success: function(response) {
                            var mappedData = response.data.map(function(item, index) {
                                return {
                                    ...item,
                                    autoIncrementId: index + 1
                                };
                            });
                            deferred.resolve(mappedData, {
                                totalCount: response.total,
                                summary: response.summary
                            });
                        }
                    });
                    return deferred.promise();
                }
            },
            remoteOperations: {
                paging: true // Enable remote paging
            },
    
    Login or Signup to reply.
  2. Use Datatable

        $(function() {
            datatable2 = $('#redeemTable').DataTable({
                pageLength: 5,
                processing: true,
                serverSide: true,
                responsive: false,
                destroy: true,
                searching: true,
              
                ajax: {
                    url: '{{ route('refer.redeem.getData') }}',
                    type: "get",
                    data: function(d) {
                        d.user_id = {{ $user_id }}
                    }
                },
                dom: 'rtip',
                "order": [
                    [0, "desc"]
                ],
                "paging": true,
                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: "id",
                        orderable: false
                    },
                    {
                        data: 'text',
                        name: 'text'
                    },
                    {
                        data: 'point',
                        name: 'point'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    },
                    {
                        data: 'id',
                        name: 'id',
                        orderable: false
                    }
                ],
            });
        });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search