Home » Laravel Custom Dropdown Server Side Filter in Datatables

Laravel Custom Dropdown Server Side Filter in Datatables

Today, We want to share with you Laravel Custom Dropdown Server Side Filter in Datatables.In this post we will show you PHP Laravel DataTable Custom Filter Server Side, hear for php Laravel Filtering Datatables through a dropdown list we will give you demo and example for implement.In this post, we will learn about custom laravel filter datatable serverside with an example.

Laravel Custom Dropdown Server Side Filter in Datatables

There are the Following The simple About Laravel Custom Dropdown Server Side Filter in Datatables Full Information With Example and source code.

As I will cover this Post with live Working example to develop Create Custom Dropdown Server Side Filter in Datatables, so the some major files and Directory structures for this example is following below.

Read Also:  Rating Stars with simple jQuery

Create Custom Dropdown Server Side Filter in Datatables

Step 1 : Laravel custom dropdown server-side filter

HTML Table source code with empty table body (tbody)

    <table class="table" id="dtListMembers">
      <thead>
        <tr>
          <th>ID</th>
          <th>Member Name</th>
          <th>Member Email</th>
          <th>Mobile</th>
          <th>Prorities</th>
        </tr>
      </thead>
      <tbody>
        <!-- Simple jQuery Ajax Load -->
      </tbody>
    </table>

Step 2 : Include CDN

CSS CDN into the head tag in Laravel Project

    <link href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

Include Before closing body part

    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

Step 3 : server-side datatable

Ajax call server-side datatable

    var dtListMembers = $("#dtListMembers").DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": Laravel.appURL+'/members/json',
      "columns": [
        {
          data: 'id'
        },
        {
          data: 'membername'
        },
        {
          data: 'email'
        },
        {
          data: 'mobile'
        },
        {
          data: 'prorities'
        },
      ]
      ...
    });

Make the filter dropdown

    <select id="proritiesFilter">
      <option value="">All Prorities</option>
      <option value="Normal">Normal</option>
      <option value="Low">Low</option>
      <option value="High">High</option>
      <option value="Critical">Critical</option>
      <option value="Simple">Simple</option>
    </select>

jquery on change event

    $('#proritiesFilter').on('change', function(){
      var filter_value = $(this).val();
      var liveurl = Laravel.appURL+'/member/json/'+filter_value;
      dtListMembers.ajax.url('+liveurl+').load();
    });

Step 4 : Laravel Register routes

routes/web.php

    // Route for list of members in json format
    Route::get('/member/json', '[email protected]')->middleware('ajax');
    // Route for list of members with specific prorities in json format
    Route::get('/member/json/{prorities}', '[email protected]')->middleware('ajax');

Step 5 : Create Laravel controller

Laravel Handle jquery ajax request in the controller

    public function json(Request $request)
    {
      if($request->prorities) {
        $members = Member::where('prorities',$request->prorities)->get();
        return response()->json(['data' => $members]);
      } else {
        $members = Member::get();
        return response()->json(['data' => $members]);
      }
    }

Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Laravel Convert object Array JSON String Example

Summary

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

I hope you get an idea about Laravel Custom Dropdown Server Side Filter in Datatables.
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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  jQuery Facebook Like Infinite Scroll Pagination in PHP MySQLi
  2. Read Also:  Custom Filter using Angular Example
  3. Read Also:  gotoxy function in c++ header file
  4. Read Also:  Angular UI Grid Table Tutorial With Example
  5. Read Also:  PHP Laravel Autocomplete search from Database Example
  6. Read Also:  DataTable Custom Filter Server Side Examples
  7. Read Also:  Laravel 6 SubQuery MySQL Tutorial with Examples
  8. Read Also:  Angular KeyValue Pipe Example Tutorial
  9. Read Also:  PHP Contact Form Send Email Add More File Attachment
  10. Read Also:  Laravel Datatables Individual column searching using Ajax Jquery

Leave a Comment

Your email address will not be published. Required fields are marked *