Laravel下拉菜单筛选

huangapple go评论82阅读模式
英文:

Laravel Drop dowm menu filter

问题

使用PHP Laravel和JavaScript,我正在创建一个下拉菜单作为筛选或搜索功能。结果将显示在下拉菜单下方。位置筛选正常工作,但其他两个下拉菜单,用于类型和项目名称,不起作用。您能帮助我解决这个问题吗?谢谢。

我已尝试修改JavaScript和模型以查看是否有任何改进。

这是.blade.php文件的一部分:

@extends('pages.main-content')
@section('css')
<style>
    .main-f {
        height: 85vh;
    }

    .bg-sidebar {
        background-color: #313A46;
    }
</style>
@endsection

@section('content')
<div class="container-fluid shadow py-3 px-5 main-f for_label">
    <div class="row p-1">
        <div class="col-12 col-md-4 col-lg-4">
            <label for="form" class="p-1">Location</label>
            <select name="irlocation" id="irlocation" class="form-select for_label">
                <option disabled selected>--Select--</option>
                @foreach($location as $loc)
                <option value='{{ $loc->loc_name }}'>{{ $loc->loc_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-4 col-lg-4">
            <label for="form" class="p-1">Type</label>
            <select name="irtype" id="irtype" class="form-select for_label">
                <option disabled selected>--Select--</option>
                @foreach($incidenttype as $incident)
                <option value='{{ $incident->incidenttype }}'>{{ $incident->type_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-12 col-md-4 col-lg-4">
            <label for="form" class="p-1">Project Name</label>
            <select name="irtype" id="irtype" class="form-select for_label">
                <option disabled selected>--Select--</option>
                @foreach($systemapps as $system)
                <option value='{{ $system->systemapps }}'>{{ $system->syst_xname }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="row p-2">
        <div class="col-12 col-md-4 col-lg-4">
            <button type="submit" id="submitBtn" class="btn btn-allcard">SUBMIT</button>
        </div>
    </div>
    <table id="dataTable" class="table" style="display: none;">
        <thead>
            <tr>
                <th>IR Number/ID</th>
                <th>Location</th>
                <th>Type</th>
                <th>Project Name</th>
            </tr>
        </thead>
        <tbody id="tableData">
            @forelse($incidentReports as $incident)
            <tr>
                <td>{{ $incident->incident_id }}</td>
                <td>{{ $incident->incident_type }}</td>
                <td>{{ $incident->incident_type }}</td>
                <td>{{ $incident->incident_affected }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="4">No data available</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function() {
  $('#header-toggle').click();

  $('#irlocation, #irtype').on('change', function() {
    var location = $('#irlocation').val();
    var type = $('#irtype').val();

    $.ajax({
      url: "{{ route('ir.reports') }}",
      type: "POST",
      data: {
        _token: "{{ csrf_token() }}",
        location: location,
        type: type
      },
      success: function(response) {
        var tableBody = $('#dataTable tbody');
        tableBody.empty(); // Clear previous table rows

        if (response.length > 0) {
          var rows = $.map(response, function(incident) {
            return `<tr>
              <td>${incident.incident_id}</td>
              <td>${incident.incident_location}</td>
              <td>${incident.incident_type}</td>
              <td>${incident.incident_affected}</td>
            </tr>`;
          });

          tableBody.html(rows.join(''));
        } else {
          var emptyRow = `<tr>
            <td colspan="4">No data available</td>
          </tr>`;
          tableBody.html(emptyRow);
        }

        $('#dataTable').show();
      }
    });
  });

  $('#submitBtn').click(function(e) {
    e.preventDefault();
    $('#irlocation, #irtype').trigger('change');
  });
});

</script>
@endsection

这是Web控制器:

public function index(Request $request)
{
    session(['message' => 'Incident Management Report', 'icon' => 'bi bi-exclamation-triangle-fill', 'icon-code' => '']);

    $incidenttype = SystemIncidentType::orderBy('type_name', 'asc')->get();
    $systemapps = SystemApps::orderBy('syst_xname', 'asc')->get();
    $location = ModLocation::orderBy('loc_name', 'asc')->get();

    $incidentReports = IncidentReports::with('userbasic', 'useremp')->get();

    return view('pages.incident_management_report.reports', compact('incidenttype', 'systemapps', 'location', 'incidentReports'));
}

这是API控制器:

public function irReports(Request $request)
{
    if ($request->ajax()) {
        $location = $request->input('location');
        $type = $request->input('type');
        $project = $request->input('project');

        $query = IncidentReports::query();

        if ($location) {
            $query->where('incident_location', $location);
        }

        if ($type) {
            $query->where('incident_type', $type);
        }

        if ($project) {
            $query->where('incident_affected', $project);
        }

        $data = $query->get();

        return response()->json($data);
    }
}

这是API路由:

Route::post('ir/reports', [IncidentReportsController::class, 'irReports'])->name('ir.reports');
英文:

Using PHP Laravel and JavaScript, I am creating a dropdown menu as a filter or search feature. The results will be displayed below the dropdown menu. The filter for location is working, but the other two dropdowns, which are for type and project name, are not functioning. Can you please assist me with this issue? Thank you.

I have attempted to modify the JavaScript and model to see if there are any improvements.

this is the .blade.php

@extends(&#39;pages.main-content&#39;)
@section(&#39;css&#39;)
&lt;style&gt;
.main-f {
height: 85vh;
}
.bg-sidebar {
background-color: #313A46;
}
&lt;/style&gt;
@endsection
@section(&#39;content&#39;)
&lt;div class=&quot;container-fluid shadow py-3 px-5 main-f for_label&quot;&gt;
&lt;div class=&quot;row p-1&quot;&gt;
&lt;div class=&quot;col-12 col-md-4 col-lg-4&quot;&gt;
&lt;label for=&quot;form&quot; class=&quot;p-1&quot;&gt;Location&lt;/label&gt;
&lt;select name=&quot;irlocation&quot; id=&quot;irlocation&quot; class=&quot;form-select for_label&quot;&gt;
&lt;option disabled selected&gt;--Select--&lt;/option&gt;
@foreach($location as $loc)
&lt;option value=&#39;{{ $loc-&gt;loc_name }}&#39;&gt;{{ $loc-&gt;loc_name }}&lt;/option&gt;
@endforeach
&lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;col-12 col-md-4 col-lg-4&quot;&gt;
&lt;label for=&quot;form&quot; class=&quot;p-1&quot;&gt;Type&lt;/label&gt;
&lt;select name=&quot;irtype&quot; id=&quot;irtype&quot; class=&quot;form-select for_label&quot;&gt;
&lt;option disabled selected&gt;--Select--&lt;/option&gt;
@foreach($incidenttype as $incident)
&lt;option value=&#39;{{ $incident-&gt;incidenttype }}&#39;&gt;{{ $incident-&gt;type_name }}&lt;/option&gt;
@endforeach
&lt;/select&gt;
&lt;/div&gt;
&lt;div class=&quot;col-12 col-md-4 col-lg-4&quot;&gt;
&lt;label for=&quot;form&quot; class=&quot;p-1&quot;&gt;Project Name&lt;/label&gt;
&lt;select name=&quot;irtype&quot; id=&quot;irtype&quot; class=&quot;form-select for_label&quot;&gt;
&lt;option disabled selected&gt;--Select--&lt;/option&gt;
@foreach($systemapps as $system)
&lt;option value=&#39;{{ $system-&gt;systemapps }}&#39;&gt;{{ $system-&gt;syst_xname }}&lt;/option&gt;
@endforeach
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row p-2&quot;&gt;
&lt;div class=&quot;col-12 col-md-4 col-lg-4&quot;&gt;
&lt;button type=&quot;submit&quot; id=&quot;submitBtn&quot; class=&quot;btn btn-allcard&quot;&gt;SUBMIT&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;table id=&quot;dataTable&quot; class=&quot;table&quot; style=&quot;display: none;&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;IR Number/ID&lt;/th&gt;
&lt;th&gt;Location&lt;/th&gt;
&lt;th&gt;Type&lt;/th&gt;
&lt;th&gt;Project Name&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody id = &quot;tableData&quot;&gt;
@forelse($incidentReports as $incident)
&lt;tr&gt;
&lt;td&gt;{{ $incident-&gt;incident_id }}&lt;/td&gt;
&lt;td&gt;{{ $incident-&gt;incident_type }}&lt;/td&gt;
&lt;td&gt;{{ $incident-&gt;incident_type }}&lt;/td&gt;
&lt;td&gt;{{ $incident-&gt;incident_affected }}&lt;/td&gt;
&lt;/tr&gt;
@empty
&lt;tr&gt;
&lt;td colspan=&quot;4&quot;&gt;No data available&lt;/td&gt;
&lt;/tr&gt;
@endforelse
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
@endsection
@section(&#39;scripts&#39;)
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;#header-toggle&#39;).click();
$(&#39;#irlocation, #irtype&#39;).on(&#39;change&#39;, function() {
var location = $(&#39;#irlocation&#39;).val();
var type = $(&#39;#irtype&#39;).val();
$.ajax({
url: &quot;{{ route(&#39;ir.reports&#39;) }}&quot;,
type: &quot;POST&quot;,
data: {
_token: &quot;{{ csrf_token() }}&quot;,
location: location,
type: type
},
success: function(response) {
var tableBody = $(&#39;#dataTable tbody&#39;);
tableBody.empty(); // Clear previous table rows
if (response.length &gt; 0) {
var rows = $.map(response, function(incident) {
return `&lt;tr&gt;
&lt;td&gt;${incident.incident_id}&lt;/td&gt;
&lt;td&gt;${incident.incident_location}&lt;/td&gt;
&lt;td&gt;${incident.incident_type}&lt;/td&gt;
&lt;td&gt;${incident.incident_affected}&lt;/td&gt;
&lt;/tr&gt;`;
});
tableBody.html(rows.join(&#39;&#39;));
} else {
var emptyRow = `&lt;tr&gt;
&lt;td colspan=&quot;4&quot;&gt;No data available&lt;/td&gt;
&lt;/tr&gt;`;
tableBody.html(emptyRow);
}
$(&#39;#dataTable&#39;).show();
}
});
});
$(&#39;#submitBtn&#39;).click(function(e) {
e.preventDefault();
$(&#39;#irlocation, #irtype&#39;).trigger(&#39;change&#39;);
});
});
&lt;/script&gt;
@endsection

this is the web controller

public function index(Request $request)
{
session([&#39;message&#39; =&gt; &#39;Incident Management Report&#39;, &#39;icon&#39; =&gt; &#39;bi bi-exclamation-triangle-fill&#39;, &#39;icon-code&#39; =&gt; &#39;&#39;]);
$incidenttype = SystemIncidentType::orderBy(&#39;type_name&#39;, &#39;asc&#39;)-&gt;get();
$systemapps = SystemApps::orderBy(&#39;syst_xname&#39;, &#39;asc&#39;)-&gt;get();
$location = ModLocation::orderBy(&#39;loc_name&#39;, &#39;asc&#39;)-&gt;get();
$incidentReports = IncidentReports::with(&#39;userbasic&#39;, &#39;useremp&#39;)-&gt;get();
return view(&#39;pages.incident_management_report.reports&#39;, compact(&#39;incidenttype&#39;, &#39;systemapps&#39;, &#39;location&#39;, &#39;incidentReports&#39;));
}

this is the api controller

public function irReports(Request $request)
{
if ($request-&gt;ajax()) {
$location = $request-&gt;input(&#39;location&#39;);
$type = $request-&gt;input(&#39;type&#39;);
$project = $request-&gt;input(&#39;project&#39;);
$query = IncidentReports::query();
if ($location) {
$query-&gt;where(&#39;incident_location&#39;, $location);
}
if ($type) {
$query-&gt;where(&#39;incident_type&#39;, $type);
}
if ($project) {
$query-&gt;where(&#39;incident_affected&#39;, $project);
}
$data = $query-&gt;get();
return response()-&gt;json($data);
}
}

this the api routes

Route::post(&#39;ir/reports&#39;, [IncidentReportsController::class, &#39;irReports&#39;])-&gt;name(&#39;ir.reports&#39;);

答案1

得分: 0

你在选择框中使用了相同的名称项目名称类型,并且都使用了"irtype",因此它会获取最后一个选择框即项目名称的值,并使用项目名称输入值搜索类型。因此可能没有与搜索值匹配的记录。

更新你的选择框名称和ID,然后尝试。

英文:

You're using same name for select box Project Name and Type with &quot;irtype&quot;, so it would fetch the value of last select box i.e, project name value and search for type with project name input value. So there may no records with search value.

Update your selectbox name and id, then try

huangapple
  • 本文由 发表于 2023年6月5日 09:19:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76403039.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定