How can I do multiple filtering with datatables?

Question

I'm trying to filter my data by project status, client_id, and priority. The project status and client works, when I add the priority the code. When I run the filters I do not get any errors and the page refreshes as though all is selected.

Here is my controller

$projects = Project::select('priority','project_name',  'client_id', 'completion_percent');
$projects->get();

return DataTables::of($projects)
->editColumn('priority', function ($row) {
   if ($row->priority == "A"){
   return '<label class="label label-success">' . strtoupper($row->priority) . '</label>';

   }else if ($row->priority == "B"){
                return '<label class="label label-danger">' . strtoupper($row->priority) . '</label>';
            }

    return '<label class="label label-warning">' . strtoupper($row->priority) . '</label>';
        })
->rawColumns(['project_name', 'priority', 'action', 'completion_percent' ])
->make(true);

Here is my HTML for the filter of priority

<div class="col-md-3">
  <div class="form-group">
     <label class="control-label">@lang('app.menu.projects') @lang('app.priority')</label>
      <select class="select2 form-control" data-placeholder="@lang('app.menu.projects') @lang('app.priority')" id="priority">
                                <option selected value="all">All</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                            </select>
                        </div>
                    </div>

And here is the java script

function showData() {
    var status = $('#status').val();
    var clientID = $('#client_id').val();
    var priority = $('#priority').val();

    var searchQuery = "?status="+status+"&client_id="+clientID+"&priority="+priority;
   table = $('#project-table').dataTable({
        responsive: true,
        processing: true,
        serverSide: true,
        destroy: true,
        ajax: '{!! route('admin.projects.data') !!}'+searchQuery,
        "order": [[ 0, "desc" ]],
        deferRender: true,
        language: {
            "url": "<?php echo __("app.datatable") ?>"
        },
        "fnDrawCallback": function( oSettings ) {
            $("body").tooltip({
                selector: '[data-toggle="tooltip"]'
            });
        },
        columns: [

            { data: 'priority', name: 'priority'},
            { data: 'project_name', name: 'project_name'},
            { data: 'members', name: 'members' },
            { data: 'deadline', name: 'deadline' },
            { data: 'client_id', name: 'client_id' },
            { data: 'completion_percent', name: 'completion_percent' },
            { data: 'action', name: 'action' }
        ]
    });
}

$('#status').on('change', function(event) {
    event.preventDefault();
    showData();
});

$('#client_id').on('change', function(event) {
    event.preventDefault();
    showData();
});
$('#priority').on('change', function(event) {
    event.preventDefault();
    showData();
});

Answer 1

I would do it like this using the Datatable search plug-in:

$.fn.dataTable.ext.search.push(function (settings, searchData, index, rowData, counter) {
  let shouldDisplay = true;
  let searchValue = $('#priority').val();
  if (searchValue === 'A') {
      shouldDisplay = (rowData. priority === 'A') ? true : false;
  } else if (searchValue === 'B') {
      shouldDisplay = (rowData. priority === 'B') ? true : false;
  }
      return shouldDisplay;
});


$('#priority').on('change', function() {
   table.draw();
});

You can read more here on utilizing this plugin https://datatables.net/manual/plug-ins/search