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

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

Step 2: HTML table in Laravel Blade File

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

Also Read :  Ajax Autocomplete Search using jQuery with PHP MySQLi

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.

<script>
    $(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" }
            ]    

        });
    });
</script>

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 :  Laravel Tips Tricks and Techniques for Developers

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" onclick="" title="Edit">
                                        </button>
                                        <button type="button" style="margin-left:6px;" class="btn btn-success" onclick="" 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 :  Laravel 5.6 Data Export to CSV and Excel Example

$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.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]