Laravel如何按日期为表创建过滤器

Question

所以我对表进行了更新，以便用户可以通过为选择添加下拉菜单来搜索按日期(年)过滤的数据。我尝试使用ajax过滤日期，但不知怎的，我无法使它工作。我可以知道我的代码有什么问题吗?或者有其他方法可以按日期过滤我的表吗?

表视图的刀片文件

<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Tabel Pekerjaan</h3>
<br>
<div class="card-tools">
<a href="/tambahpekerjaan" type="button" class="btn btn-outline-success btn-block"><i class="fa fa-plus"></i>&nbsp Tambah Pekerjaan</a>
</div>
<div class="col-md-2">
<select id="filter-tahun" class="form-control filter">
<option value="">Pilih Tahun</option>
@foreach ($pekerjaan as $pekerjaans)
<option value="{{$pekerjaans->id}}">{{$pekerjaans->tanggal}}</option>
@endforeach
</select>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive">
<table id="tabelpekerjaan" class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">No.</th>
<th>Paket Pekerjaan</th>
<th>Tanggal</th>
<th>Nama Perusahaan</th>
<th>Lokasi Pekerjaan</th>
<th>PPK</th>
<th>HPS</th>
<th>Gambar</th>
<th style="width: 120px">Aksi</th>
</tr>
</thead>
<tbody>
@php $no = 1; @endphp
@foreach ($pekerjaan as $pekerjaans)
<tr>
<td>{{$no++}}</td>
<td>{{$pekerjaans->pekerjaan}}</td>
<td>{{$pekerjaans->tanggal}}</td>
<td>{{$pekerjaans->penyedia->nama}}</td>
<td>{{$pekerjaans->lokasi}}</td>
<td>{{$pekerjaans->user->name}}</td>
<td>Rp. {{number_format($pekerjaans->hps,0,',',',')}}</td>
<td>
<img src="{{asset('gambarpekerjaan/'.$pekerjaans->gambar)}}" style="width: 100px"alt="">
</td>
<td>
@if (Auth::user()->status=='super')
<a href="/editpekerjaan/{{$pekerjaans->id}}" type="button" class="btn btn-outline-primary">Edit</a>
<a href="#" type="button" class="btn btn-outline-danger delete" data-id="{{$pekerjaans->id}}" data-nama="{{$pekerjaans->pekerjaan}}">Hapus</a>
@else
<a href="/editpekerjaan/{{$pekerjaans->id}}" type="button" class="btn btn-outline-primary btn-block">Edit</a>

@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->


</div>
</section>

下面是脚本

<script>

$(function () {
// let pekerjaan = $("#filter-tahun").val();

/*const table =*/ $('#tabelpekerjaan').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"responsive": true,
// "ajax":{
//   url: "{{url('')}}/datapekerjaan",
//   type:"POST",
//   data:function(d){
//     d.pekerjaan = pekerjaan;
//     return d
//   }
// }
});
//Initialize Select2 Elements
$('.select2bs4').select2({
theme: 'bootstrap4'
})
});

@if (session()->has('message'))
toastr.success("{{session()->get('message')}}")  
@endif
$('.delete').click(function(){
var idpekerjaan = $(this).attr('data-id');
var namapekerjaan = $(this).attr('data-nama');
Swal.fire({
title: 'Apakah Anda yakin?',
text: "Paket Pekerjaan "+namapekerjaan+" akan dihapus!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, yakin!'
}).then((result) => {
if (result.isConfirmed) {
window.location = "/deletepekerjaan/"+idpekerjaan+""
Swal.fire(
'Dihapus!',
'Data berhasil dihapus.',
'success'
)
}
});
});
// $(".filter").on('change',function(){
//   pekerjaan = $("#filter-tahun").val()
//   table.ajax.reload(null,false)
// })
</script>

我评论ajax的一部分,因为它不工作,我的表变得一团糟…

我可以知道如何解决这个问题吗?提前感谢

Answer 1

Check This

美元(文档)。Ready (function () {//设置——添加一个文本输入每个页脚细胞$('#example head tr').clone(真正的).addClass(过滤器).appendTo (# thead例子);

var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('change', function (e) {
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
})
.on('keyup', function (e) {
e.stopPropagation();
$(this).trigger('change');
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
}); });

参考https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html