DataTables Server-side Processing using Laravel
In this post we will show you DataTables Server-side Processing using Laravel, hear for DataTables Server-side Processing using Laravel we will give you demo and example for implement.
we will demonstrate to you the most straightforward approach to actualize DataTables jQuery Plugin with remote server side handling in Laravel or in simple word we can say DataTables Server-side Processing using Laravel and jQuery. Here we will demonstrate to you industry standards to bring information from remote MySQL database through ajax in Laravel. For the individuals who don’t here about Datatables, DataTables is a table improving module for the jQuery Javascript library that aides in including arranging, paging and separating capacities to plain HTML tables with insignificant exertion. The primary objective is to upgrade the openness of information in typical HTML tables.
Presently before we begin coding incorporate Datatables CSS record and Javascript documents from CDN in your view page as takes after.
1
2
3
4
| <!-- css and js for DataTables Server-side Processing --><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/><script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script> |
Presently we should comprehend what all undertakings we have to do
- We need to confine the measure of the table. (As a matter of course 10, 25, 50, 100 or 200 entries)
- The Pagination task.
- Now Implement look functionality.
All above undertaking will be done in the controller and it will be clarified later in this post DataTables Server-side Processing using Laravel.
Now let’s start coding for DataTables Server-side Processing using Laravel
In the view page code for HTML table is given beneath for DataTables Server-side Processing.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <h2>DataTables Server-side Processing using Laravel - demo </h2><div class="row divlcs"> <div class="col-md-12 divlcs> <table class="table table-bordered divlcs" id="posts_table"> <thead> <th>Id</th> <th>Title</th> <th>Body</th> <th>Created Time</th> <th>Options</th> </thead> </table> </div></div> |
DataTables Server-side Processing javascript code is given below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <script> $(document).ready(function () { $('#posts_table').DataTable({ "serverSide": true, "processing": true, "ajax":{ "url": "{{ url('allposts') }}", "dataType": "json", "type": "POST", "data":{ _token: "{{csrf_token()}}"} }, "columns": [ { "data": "id" }, { "data": "title" }, { "data": "body" }, { "data": "created_at" }, { "data": "options" } ] }); });</script> |
Note: Do not forget to pass CSRF Token along with ajax POST request as above. Otherwise, internal server error 500 will occur. This is because Laravel checks CSRF token in all POST controller functions by default to ensure maximum protection.
Now the code for post routes in routes/web.php
1
2
| // set RouteRoute::post('allposts', 'PostController@allPosts' )->name('allposts'); |
Now we using Laravel Eloquent for simplicity and code size reduction. So we need to create a Post model.
DataTables Server-side Processing Post model code is given below.
1
2
3
4
5
6
7
8
9
10
| <?php// namespacenamespace App;use Illuminate\Database\Eloquent\Model;// class Postclass Post extends Model{ } |
Note: If you don’t have a clue about the essential idea of Laravel Eloquent ORM then all controller code may discover small befuddling to you. If it’s not too much trouble consider discovering that before continuing this post DataTables Server-side Processing using Laravel.
Presently before we begin coding our controller we have to realize that Datatable will post a great deal of information to controller work amid Ajax ask. I found that capacity by utilizing a module in firefox called Firebug. On the off chance that you are a web designer and utilize ajax frequently then I to a great degree prescribe Firebug.
For this post DataTables Server-side Processing using Laravel, we have to take a gander at just 6 post demands.
length: Number of records that the table can show in the present draw. It is normal that the quantity of records returned will be equivalent to this number unless the server has less records to return.
- start: Paging initially record pointer. This is the begin point in the present informational collection (0 record based – i.e. 0 is the principal record).
- order[0]column: Column to which requesting ought to be connected. This is a file reference to the segments cluster of data that is additionally submitted to the server.
- order[0]dir: Ordering heading for this segment. It will be asc or desc to demonstrate rising requesting or diving requesting, respectively.
- search[value]: The Global hunt value.
- draw: Draw counter. This is utilized by DataTables to guarantee that the Ajax comes back from server-side preparing demands are attracted arrangement by DataTables (Ajax asks for are nonconcurrent and in this manner can return out of sequence).
Presently the code for allPost work in PostController for DataTables Server-side Processing.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| public function allPosts(Request $request){ $totalFilteredRecord = $totalDataRecord = $draw_val = ""; $columns_list = array( 0 =>'id', 1 =>'title', 2=> 'body', 3=> 'created_at', 4=> 'id', ); $totalDataRecord = Post::count(); $totalFilteredRecord = $totalDataRecord; $limit_val = $request->input('length'); $start_val = $request->input('start'); $order_val = $columns_list[$request->input('order.0.column')]; $dir_val = $request->input('order.0.dir'); if(empty($request->input('search.value'))) { $post_data = Post::offset($start_val) ->limit($limit_val) ->orderBy($order,$dir_val) ->get(); } else { $search_text = $request->input('search.value'); $post_data = Post::where('id','LIKE',"%{$search_text}%") ->orWhere('title', 'LIKE',"%{$search_text}%") ->offset($start_val) ->limit($limit_val) ->orderBy($order,$dir_val) ->get(); $totalFilteredRecord = Post::where('id','LIKE',"%{$search_text}%") ->orWhere('title', 'LIKE',"%{$search_text}%") ->count(); } $data_val = array(); if(!empty($post_data)) { foreach ($post_data as $post_val) { $datashow = route('posts_table.show',$post_val->id); $dataedit = route('posts_table.edit',$post_val->id); $postnestedData['id'] = $post_val->id; $postnestedData['title'] = $post_val->title; $postnestedData['body'] = substr(strip_tags($post_val->body),0,50)."....."; $postnestedData['created_at'] = date('j M Y h:i a',strtotime($post_val->created_at)); $postnestedData['options'] = " <a href='{$datashow}'class='showdata' title='SHOW DATA' ><span class='showdata glyphicon glyphicon-list'></span></a> <a href='{$dataedit}' class='editdata' title='EDIT DATA' ><span class='editdata glyphicon glyphicon-edit'></span></a>"; $data_val[] = $postnestedData; } } $draw_val = $request->input('draw'); $get_json_data = array( "draw" => intval($draw_val), "recordsTotal" => intval($totalDataRecord), "recordsFiltered" => intval($totalFilteredRecord), "data" => $data_val ); echo json_encode($get_json_data); } |
DataTables Server-side Processing how about we see output image ::
Note: The section exhibit is utilized to recognize which MySQL database table segment ought to be arranged in climbing or slipping request. They are the genuine names of the database segments. Their tally must be equivalent to Datatables sections tally.
you folks can guarantee that above code will work 100%. I additionally made a post on DataTable Server-side Processing in Codeigniter. In any case, since CodeIgniter take after conventional MVC and does not has bolster for ORM the quantity of codes is higher than Laravel. In the event that anyone needs to know the most effortless approach to actualize datatables with CodeIgniter please remark beneath and on the off chance that anyone has any proposals or questions or need any assistance remark underneath.
No comments :
Post a Comment