Laravel-datatables: How to put ajax data in DataTable As Service ?

Created on 5 May 2017  路  7Comments  路  Source: yajra/laravel-datatables

I had this when I used non-service DataTable :

//....
"processing" : true,
"pageLength": 10,
"responsive": true,
"serverSide": true,
"ajax": {
  url: "/Ajax/getUsersListAjax",
  data: function (data) {
      data.fromDate  = $('input#fromDate').val();
      data.toDate    = $('input#toDate').val();
      data.searchBox = $('input#searchBox').val();
      data.userStatus = $('select[name=userStatus]').val();
      data.userGender = $('select[name=userGender]').val();
      data.userCredit = $('input#userCredit').val();
      data.userReseller = $('input#userReseller').is(':checked');
  }
}
//....

Now I'm using Datatables as Service. I tried below, but seems something is wrong:

public function html()
    {
        return $this->builder()
                    ->columns($this->getColumns())
                    ->ajax('')
                    ->parameters([
                        'pageLength' => 25,
                        'processing' => true,
                        'serverSide' => true,
                        'responsive' => true,
                        'language' => ['url' => '/js/Persian.json'],
                        'ajax' => [
                            'url'  => '/Ajax/getUsersListAjax',
                            'data' => function(){
                                return "function(data){
                                      data.fromDate      = $('input#fromDate').val();
                                      data.toDate          = $('input#toDate').val();
                                      data.searchBox    = $('input#searchBox').val();
                                      data.userStatus    = $('select[name=userStatus]').val();
                                      data.userGender  = $('select[name=userGender]').val();
                                      data.userCredit    = $('input#userCredit').val();
                                      data.userReseller = $('input#userReseller').is(':checked');
                                }";
                            }
                        ]
                    ]);
    }

Any Ideas?

question

Most helpful comment

@yajra You were right. But I had to move ajax data from ->parameters() to ->ajax()

Here is the final:

public function html()
    {
        return $this->builder()
                    ->columns($this->getColumns())
                    ->ajax([
                        'url'  => '',
                        'data' => "function(data){
                                  data.fromDate      = $('input#fromDate').val();
                                  data.toDate          = $('input#toDate').val();
                                  data.searchBox    = $('input#searchBox').val();
                                  data.userStatus    = $('select[name=userStatus]').val();
                                  data.userGender  = $('select[name=userGender]').val();
                                  data.userCredit    = $('input#userCredit').val();
                                  data.userReseller = $('input#userReseller').is(':checked');
                        }"
                    ])
                    ->parameters([
                        'order' => [ [0, 'desc'] ],
                        'buttons' => ['excel'],
                        'pageLength' => 25,
                        'processing' => true,
                        'serverSide' => true,
                        'responsive' => true,
                    ]);
    } 

Working Like A Charm. Thank You @yajra :+1:

All 7 comments

Try updating ajax data to:

'data' => "function(data){
          data.fromDate      = $('input#fromDate').val();
          data.toDate          = $('input#toDate').val();
          data.searchBox    = $('input#searchBox').val();
          data.userStatus    = $('select[name=userStatus]').val();
          data.userGender  = $('select[name=userGender]').val();
          data.userCredit    = $('input#userCredit').val();
          data.userReseller = $('input#userReseller').is(':checked');
}"

And here is my Filter Method when I used non-service DataTables:

public function getUsersListAjax(Request $request)
    {
      $users = DB::table('users')->select(['id', 'first_name', 'last_name', 'email', 'mobile', 'credit', 'status', 'is_reseller', 'created_at']);
        return Datatables::of($users)
            ->filter(function ($query) use ($request) {
                if ($request->has('fromDate')) {
                    $query->where('created_at', '>=', convertJalaliToGeorgian($request->get('fromDate')));
                }
                if ($request->has('toDate')) {
                    $query->where('created_at', '<=', convertJalaliToGeorgian($request->get('toDate')));
                }
                if ($request->has('userStatus') && $request->get('userStatus')) {
                    $query->where('status', '=', $request->get('userStatus'));
                }
                if ($request->has('userGender') && $request->get('userGender')) {
                    $query->where('gender', '=', $request->get('userGender'));
                }
                if ($request->has('userCredit')) {
                    $credit = get_real_amount($request->get('userCredit'));
                    $query->where('credit', '>=', $credit);
                }
                if ($request->has('userReseller') && $request->get('userReseller') == 'true') {
                    $query->where('is_reseller', 1);
                }
                if ($request->has('searchBox')) {
                    $query->Where(function ($q) use($request) {
                        $q->where('last_name', 'LIKE', "%{$request->get('searchBox')}%")
                            ->orWhere('mobile', 'LIKE', "%{$request->get('searchBox')}%")
                            ->orWhere('email', 'LIKE', "%{$request->get('searchBox')}%")
                            ->orWhere('national_code', 'LIKE', "%{$request->get('searchBox')}%");
                    });
                }
            })
            ->make(true);
    }

In As-Service mode where should I put the where conditions for filtering?

I exactly want this but for As-Service mode.

Just add the same filter code on ajax() or dataTable() method.

@yajra Thank you for quick replies.

I'm using Laravel 5.4 with Yajra Datatables 7.3. There is no ajax() method! but dataTable() is.

Here is my code:

public function dataTable()
    {
        $request = $this->request();
        return $this->datatables
            ->eloquent($this->query())
            ->filter(function ($query) use ($request) {
                if ($request->has('userStatus') && $request->get('userStatus')) {
                    $query->where('status', '=', $request->get('userStatus'));
                }
                if ($request->has('userGender') && $request->get('userGender')) {
                    $query->where('gender', '=', $request->get('userGender'));
                }
                if ($request->has('userCredit')) {
                    $credit = get_real_amount($request->get('userCredit'));
                    $query->where('credit', '>=', $credit);
                }
                if ($request->has('userReseller') && $request->get('userReseller') == 'true') {
                    $query->where('is_reseller', 1);
                }
            });
    }

And here is html() method:

public function html()
    {
        return $this->builder()
                    ->columns($this->getColumns())
                    ->ajax('')
                    ->parameters([
                        'dom' => '<"top text-center"r><"pull-right"l>Bt<"pull-left"p><"pull-right"i><"clear">',
                        'order' => [ [0, 'desc'] ],
                        'buttons' => ['excel'],
                        'pageLength' => 25,
                        'processing' => true,
                        'serverSide' => true,
                        'responsive' => true,
                        'language' => ['url' => '/js/Persian.json'],
                        'ajax' => [
                            'url'  => '/Ajax/getUsersListAjax',
                            'data' => "function(data){
                                  data.fromDate      = $('input#fromDate').val();
                                  data.toDate          = $('input#toDate').val();
                                  data.searchBox    = $('input#searchBox').val();
                                  data.userStatus    = $('select[name=userStatus]').val();
                                  data.userGender  = $('select[name=userGender]').val();
                                  data.userCredit    = $('input#userCredit').val();
                                  data.userReseller = $('input#userReseller').is(':checked');
                        }"
                        ]
                    ]);
    }

But still not working! :(

I think problem is 'url' => '/Ajax/getUsersListAjax'. Because this route is for when I used non-service dataTable!

Route::get('/Ajax/getUsersListAjax'', 'UserController@getUsersListAjax');

_See getUsersListAjax here_

Am I right?

What ajax URL should I use?

Oh, the url now should be the same with the index page or the view page. Ajax value on service approach are usually blank.

'ajax' => [
    'url'  => '',

@yajra You were right. But I had to move ajax data from ->parameters() to ->ajax()

Here is the final:

public function html()
    {
        return $this->builder()
                    ->columns($this->getColumns())
                    ->ajax([
                        'url'  => '',
                        'data' => "function(data){
                                  data.fromDate      = $('input#fromDate').val();
                                  data.toDate          = $('input#toDate').val();
                                  data.searchBox    = $('input#searchBox').val();
                                  data.userStatus    = $('select[name=userStatus]').val();
                                  data.userGender  = $('select[name=userGender]').val();
                                  data.userCredit    = $('input#userCredit').val();
                                  data.userReseller = $('input#userReseller').is(':checked');
                        }"
                    ])
                    ->parameters([
                        'order' => [ [0, 'desc'] ],
                        'buttons' => ['excel'],
                        'pageLength' => 25,
                        'processing' => true,
                        'serverSide' => true,
                        'responsive' => true,
                    ]);
    } 

Working Like A Charm. Thank You @yajra :+1:

@kamrava +1,
Still Working Like A Charm.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hohuuhau picture hohuuhau  路  3Comments

SGarridoDev picture SGarridoDev  路  3Comments

nasirkhan picture nasirkhan  路  3Comments

ahmadbadpey picture ahmadbadpey  路  3Comments

vipin733 picture vipin733  路  3Comments