Categories

Tuesday, June 18, 2024
#919814419350 therichposts@gmail.com
DatatableLaravel

Data-tables with ajaxify content in Laravel

Laravel 7.2 routing with route group auth guard check with prefix

Data-tables with ajaxify content in Laravel

Hello to all, welcome to therichpost.com. In this post, I will tell you, Data-tables with ajaxify content in Laravel. Laravel is one of the top php mvc framework

Datatables are the powerful jquery plug-in and it is used to create table listing with sorting and searching and many more functionality. I personally like data-tables very much because it is well-mannered listing of content in table structure.

datatables-in-laravel

First, we will do code in laravel controller:

public function Getdata(Request $request)
  {
    $list = DB::table('users')
            ->select('name','email','telephone','updatedat')
            ->get();

        return response()->json([
            'data' => $list
        ]);


  }

 Second, we will do code in laravel route:

Route::get('/getdata', 'GetdataController@Getdata')->middleware('ajax');

 Third, finally we will do code in laravel view:

<table id="clientsTable" class="table display responsive nowrap">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Updated at</th>
                    </tr>
                </thead>
                <tbody>

                    <tr data-toggle="modal" data-target="#modaldemo5">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  <script>
  $(document).ready(function(){
  var cTable = $('#clientsTable').DataTable({
        searching: true,
        responsive: true,
        bLengthChange: false,
        "autoWidth": false,
        language: {
         searchPlaceholder: 'Search by name..',
         sSearch: '',
         },
        "ajax": {
            "url": '/getdata',
             dataSrc: 'data',
        },
        columns: [
                { data: 'name' },
                { data: 'email' },
                { data: 'telephone' },
                { data: 'updatedat' }
            ]
    });})

 There are so many code tricks in laravel and i will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.