Javascript 如何对数据表进行多重筛选？

我正在尝试按项目状态、客户id和优先级筛选数据。 当我在代码中添加优先级时，项目状态和客户端工作。当我运行过滤器时，我没有收到任何错误，页面会刷新，就好像选择了“全部”

这是我的控制器

$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);

$projects=Project:：选择（“优先级”、“项目名称”、“客户id”、“完成百分比”）；
$projects->get（）；
返回数据表：：of（$projects）
->editColumn（'priority'，函数（$row）{
如果（$row->priority==“A”）{
返回“”。strtoupper（$row->priority）。“”；
}else if（$row->priority==“B”）{
返回“”。strtoupper（$row->priority）。“”；
}
返回“”。strtoupper（$row->priority）。“”；
})
->rawColumns（['project\u name'、'priority'、'action'、'completion\u percent']））
->使（真实）；

这是我的HTML，用于优先过滤器

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

@lang（'app.menu.projects'）@lang（'app.priority'））
全部的
A.
B

下面是java脚本

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();
});

函数showData（）{
var status=$（'#status'）.val（）；
var clientID=$（'#client_id'）.val（）；
var priority=$（'#priority'）.val（）；
var searchQuery=“？status=“+status+”&client_id=“+clientID+”&priority=“+priority；
表=$（“#项目表”）。数据表({
回答：是的，
处理：对，
服务器端：是的，
摧毁：没错，
ajax:“{！！路由（'admin.projects.data'）！！}”+searchQuery，
“订单”：[[0，“说明”]]，
是的，
语言：{
“url”：”
},
“fnDrawCallback”：函数（oSettings）{
$（“正文”）。工具提示({
选择器：'[data toggle=“tooltip”]'
});
},
栏目：[
{数据：'priority'，名称：'priority'}，
{数据：'项目名称'，名称：'项目名称'}，
{数据：'members'，名称：'members'}，
{数据：'截止日期'，名称：'截止日期'}，
{数据：'client_id'，名称：'client_id'}，
{数据：'完成百分比'，名称：'完成百分比'}，
{数据：'action'，名称：'action'}
]
});
}
$（'#status'）。关于（'change'，函数（事件）{
event.preventDefault（）；
showData（）；
});
$（“#客户端id”）。在（'change'，函数（事件）上{
event.preventDefault（）；
showData（）；
});
$（“#优先级”）。在（'change'，函数（事件）上{
event.preventDefault（）；
showData（）；
});

我将使用Datatable搜索插件这样做：

$.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();
});

你可以在这里阅读更多关于使用这个插件的内容