Cara membuat Filter pada tabel berdasarkan tahun menggunakan ajax di Laravel

Selamat pagi, saya memiliki sebuah tabel yang ingin saya tambahin fitur filter berdasarkan date(Tahun), dengan drop down menu. Saya sudah mencoba menggunakan AJAX tapi codingan nya tidak berjalan dan tabel saya jadi tidak rapi. Mohon bantuannya guys... Salah di bagian mana?

\\ tabel.blade: **

<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](https://kotakode.com/users/624)
                            <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: **

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

Untk sementara script ajax nya saya comment karena tidak berfungsi dengan benar.... Mohon bantuannya.

avatar YuPhe
@YuPhe

4 Kontribusi 0 Poin

Diperbarui 1 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban