javascript - 如何使用数据表进行多重过滤？

Question

我正在尝试按项目状态、client_id 和优先级过滤数据。 当我添加优先级代码时，项目状态和客户端工作。当我运行过滤器时，我没有收到任何错误，并且页面刷新，就像选择了所有内容一样。

这是我的 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);

这是我的优先级过滤器的 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>

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

Answer 1

我会使用数据表搜索插件这样做:

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

您可以在此处阅读有关使用此插件的更多信息 https://datatables.net/manual/plug-ins/search