PHP Laravel Datatable Server Side Processing using jQuery

Today, We want to share with you PHP Laravel Datatable Server Side Processing using jQuery Ajax.In this post we will show you Datatables Server Side Processing in Laravel 5.7, hear for datatables Laravel server-side processing in codeigniter using ajax we will give you demo and example for implement.In this post, we will learn about jQuery Datatable Server Side Processing With Custom Operations using Laravel with an example.

PHP Laravel Datatable Server Side Processing using jQuery Ajax

There are the Following The simple About PHP Laravel Datatable Server Side Processing using jQuery Ajax Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel server side processing for Datatables, so the laravel 5.7 datatables package for this example is following below.

Step 1: include Datatables CSS file and Javascript files from CDN


Step 2: HTML table in Laravel Blade File

Here are the steps to be followed for Implement datatables server side processing Laravel

Also Read :  Create JSON with json_encode and json_decode using PHP

Let the Laravel blade view page be datatable.blade.php. Your HTML Data table columns may be all the different but the step by step (laravel datatables tutorial) here.

<h3>List of The All Articles Title</h3>
<table class="table table-bordered" id="article_datatables">
    <thead>
           <th>Id</th>
           <th>Title</th>
           <th>Action</th>
          
    </thead>                
</table>

Step 3: javascript Source code

And then call simple Laravel Ajax using javascript source code given below. This ajax will automatically call action when you load your page.Below we can ajax request source code. Put this laravel datatables ajax source code to your Laravel blade view page of laravel at the bottom with laravel datatables pagination.

    $(document).ready(function () {
        $('#article_datatables').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax":{
                     "url": "/fetch_all_articles’",
                     "dataType": "json",
                     "type": "POST",
                     "data":{ _token: "{{csrf_token()}}"}
                   },
            "columns": [
                { "data": "id" },
                { "data": "title" },
                { "data": "action" }
            ]    

        });
    });

Step 4: Laravel Define Route

Put Laravel Route in your web.php files

And then we want set Laravel route for this method, so we have to go to routes/web.php file and write following source code for set route for index method.

Also Read :  vue Select Box binding Example

Route::post(‘/fetch_all_articles’,’[email protected])

Step 5: Source code for fetchAllArticles function in ArticleController

jQuery Live Server side Datatable for pagination, records and search filters in laravel datatable server side.

 public function fetchAllArticles(Request $request)
    {

        $columns = array(
            0 => 'id',
            1 => 'title',
        );
        $totalTitles = Article::where('deleted_at', '=', null)
            ->count();
        $totalFiltered = $totalTitles;

        $limit = $request->input('length');
        $start = $request->input('start');
        $order = $columns[$request->input('order.0.column')];
        $page_dir = $request->input('order.0.dir');

        if (empty($request->input('search.value'))) {
            $titles = Article::where('deleted_at', '=', null)
                ->offset($start)
                ->limit($limit)
                ->orderBy($order, $page_dir)
                ->get();
        } else {
            $string_search = $request->input('search.value');

            $titles = Article::where('title', 'LIKE', "%{$string_search}%")
                ->where('deleted_at', '=', null)
                ->offset($start)
                ->limit($limit)
                ->orderBy($order, $page_dir)
                ->get();

            $totalFiltered = Article::where('title', 'LIKE', "%{$string_search}%")
                ->where('deleted_at', '=', null)
                ->count();
        }

        $all_products_data = array();
        if (!empty($titles)) {
            $count = 1;
            foreach ($titles as $title) {

                $nestedData['id'] = $count;
                $nestedData['title'] = $titles->title;
                $nestedData['action'] = '<button type="button" class="btn btn-success" title="Edit">
                                        </button>
                                        <button type="button" style="margin-left:6px" class="btn btn-success" title="Article Delete">
                                        </button>';
                $all_products_data[] = $nestedData;
                $count++;
            }
        }

        $product_data = array(
            "draw" => intval($request->input('draw')),
            "recordsTotal" => intval($totalTitles),
            "recordsFiltered" => intval($totalFiltered),
            "data" => $all_products_data,
        );
        echo json_encode($product_data);
 }

Code Understanding

$request – In this case by default all datatables parameters are gets that are sent by jquery ajax serever side datatable.

Also Read :  PHP Multidimensional Array Searching multiple values

$totalTitles – totalTitles are the sum all thr count that will be used for Ajax call jquery Datatables pagination in your Laravel Serverside datatable.

$limit – page data record limit is the set variable that init mode number of data records to be get at a time. ( No of total data records to display on page one )

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about PHP Laravel Datatable Server Side Processing using jQuery Ajax.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of