Skip to content

Instantly share code, notes, and snippets.

@ajid2
Last active Jan 8, 2021
Embed
What would you like to do?
implementasi datatable serverside
<?php
use Yajra\DataTables\DataTables;
class TerminalController extends Controller
{
public function index(Request $request)
{
if ($request->ajax()) {
$data = Terminal::join('provinsi', 'terminal.id_provinsi', 'provinsi.id_provinsi')
->join('kabupaten', 'terminal.id_kabupaten', 'kabupaten.id_kabupaten')
->select('terminal.id_terminal', 'terminal.tipe', 'terminal.nama_terminal', 'terminal.created_at', 'provinsi.nama as prov', 'kabupaten.nama as kab')
->orderBy('terminal.nama_terminal', 'ASC');
return DataTables::of($data)
->addIndexColumn()
->addColumn('tanggal', function ($data) {
return Carbon::parse($data->created_at)->translatedFormat('d M Y');
})
->addColumn('aksi', function ($data) {
$btn = '<div class="d-flex">';
$btn .= '<button type="button" class="btn btn-primary mr-1 edit" data-id="' . $data->id_terminal . '">Edit</button>';
$btn .= '<button type="button" class="btn btn-danger ml-1 delete" data-id="' . $data->id_terminal . '">Hapus</button>';
$btn .= '</div>';
return $btn;
})
->rawColumns(['aksi'])
->make(true);
}
$provinsi = ProvinsiModel::all();
return view('admin.terminal.index', compact('provinsi'));
}
}
@extends('admin.layouts.app')
@section('title', 'Data Terminal')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Data Terminal</h4>
<button type="button" class="btn btn-primary my-4" data-toggle="modal" data-target="#addNew">Tambah
Terminal</button>
<div class="table-responsive">
<table id="data_karyawan" class="table table-striped table-bordered" style="width: 100%;">
<thead>
<tr>
<th width="5%">No</th>
<th width="20%">Nama</th>
<th width="5%">Tipe</th>
<th width="20%">Provinsi</th>
<th width="20%">Kabupaten</th>
<th width="15%">Dibuat pada</th>
<th width="10%">Aksi</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- sample modal content -->
<div id="addNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addNewLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="addNewLabel">Tambah Terminal</h4>
<button type="button" class="close ml-auto" data-dismiss="modal" aria-hidden="true">×</button>
</div>
{{ Form::open(['id' => 'formTerminal']) }}
<div class="modal-body">
<div class="form-group">
<label for="emailaddress">Nama Terminal</label>
{{ Form::text('nama', null, ['class' => 'form-control']) }}
</div>
<div class="form-group">
<label for="tipe">Tipe</label>
{{ Form::select('tipe', ['A' => 'A', 'B' => 'B', 'C' => 'C'], null, ['placeholder' => 'Pilih Tipe', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
</div>
<div class="form-group">
<label for="provinsi">Provinsi</label>
{{ Form::select('provinsi', $provinsi->pluck('nama', 'id_provinsi'), null, ['placeholder' => 'Pilih Provinsi', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
</div>
<div class="form-group">
<label for="kabupaten">Kabupaten / Kota</label>
{{ Form::select('kabupaten', [], null, ['placeholder' => 'Pilih Kota / Kabupaten', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
{{ Form::submit('Simpan', ['class' => 'btn btn-primary']) }}
</div>
{{ Form::close() }}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sample modal content -->
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-flex align-items-center">
<h4 class="modal-title" id="editModalLabel">Edit Data Terminal</h4>
<button type="button" class="close ml-auto" data-dismiss="modal" aria-hidden="true">×</button>
</div>
{{ Form::open(['id' => 'formEditTerminal']) }}
{{ Form::hidden('id_terminal', null) }}
<div class="modal-body">
<div class="form-group">
<label for="emailaddress">Nama Terminal</label>
{{ Form::text('nama', null, ['class' => 'form-control']) }}
</div>
<div class="form-group">
<label for="tipe">Tipe</label>
{{ Form::select('tipe', ['A' => 'A', 'B' => 'B', 'C' => 'C'], null, ['placeholder' => 'Pilih Tipe', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
</div>
<div class="form-group">
<label for="provinsi">Provinsi</label>
{{ Form::select('provinsi', $provinsi->pluck('nama', 'id_provinsi'), null, ['placeholder' => 'Pilih Provinsi', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
</div>
<div class="form-group">
<label for="kabupaten">Kabupaten / Kota</label>
{{ Form::select('kabupaten', [], null, ['placeholder' => 'Pilih Kota / Kabupaten', 'class' => 'form-control custom-select', 'style' => 'width: 100%']) }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
{{ Form::submit('Simpan', ['class' => 'btn btn-primary']) }}
</div>
{{ Form::close() }}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="{{ asset('dash/libs/datatables/media/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('dash/js/pages/datatable/custom-datatable.js') }}"></script>
<script>
$(document).ready(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('select[name="provinsi"]').on('change', function(){
$.ajax({
url: "{{ route('admin.terminal.getKabupaten') }}",
data: {
'provinsi' : $(this).val()
},
type: "POST",
success: function(data) {
let html = '';
html += '<option>Pilih Kota / Kabupaten</option>';
$.each(data, function(i, v){
html += '<option value="' + v.id_kabupaten + '">' + v.nama + '</option>';
});
$('select[name="kabupaten"]').html(html);
}
})
});
var table = $('#data_karyawan').DataTable({
"oLanguage": {
"oPaginate": {
"sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
"sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
},
"sInfo": "Halaman _PAGE_ dari _PAGES_",
"sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
"sSearchPlaceholder": "Cari...",
"sLengthMenu": "Tampilkan : _MENU_",
},
"stripeClasses": [],
"lengthMenu": [10, 20, 30],
"pageLength": 10,
processing: true,
serverSide: true,
ajax: {
url: "{{ route('admin.terminal') }}",
type: "GET",
},
columns: [
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
{ data: 'nama_terminal', name: 'nama_terminal' },
{ data: 'tipe', name: 'tipe' },
{ data: 'prov', name: 'prov' },
{ data: 'kab', name: 'kab' },
{ data: 'tanggal', name: 'tanggal' },
{ data: 'aksi', name: 'aksi' },
]
});
$('#formTerminal').submit(function(e){
e.preventDefault();
let data = $(this).serialize();
$.ajax({
type: "POST",
url: "{{ route('admin.terminal.store') }}",
data: data,
success: function(data) {
$('#addNew').modal('hide');
$("#data_karyawan").DataTable().ajax.reload();
Swal.fire({
title: 'Berhasil!',
text: 'Berhasil menambahkan data terminal',
icon: 'success',
confirmButtonText: 'OK'
});
$('#formTerminal').trigger("reset");
}
});
});
// edit
$('body').on('click', '.edit', function(){
let id_term = $(this).data('id');
$('#editModal').modal('show');
$.ajax({
type: "POST",
url: "{{ route('admin.terminal.edit') }}",
data: {
'id_terminal' : id_term
},
success: function(data) {
$('input[name="id_terminal"]').val(id_term);
$('input[name="nama"]').val(data.nama_terminal);
$('select[name="tipe"] option[value="'+data.tipe+'"]').prop('selected', true);
$('select[name="provinsi"] option[value="'+data.id_provinsi+'"]').prop('selected', true);
$('select[name="provinsi"]').trigger('change');
setTimeout(function(){
$('select[name="kabupaten"] option[value="'+data.id_kabupaten+'"]').prop('selected', true);
}, 1000);
}
});
});
// update
$('#formEditTerminal').submit(function(e){
e.preventDefault();
let data = $(this).serialize();
$.ajax({
type: "POST",
url: "{{ route('admin.terminal.update') }}",
data: data,
success: function(r){
$('#editModal').modal('hide');
$("#data_karyawan").DataTable().ajax.reload();
$('#formEditTerminal').trigger("reset");
}
})
});
// delete
$('body').on('click', '.delete', function(){
var id_del = $(this).data('id');
Swal.fire({
title: 'Yakin menghapus data ini?',
text: "Klik hapus untuk melanjutkan!",
type: 'warning',
showCancelButton: true,
cancelButtonText: 'Batal',
confirmButtonText: 'Hapus',
padding: '2em'
}).then(function(result) {
if (result.value) {
$.ajax({
type: "DELETE",
url: "/admin/master/terminal/delete/"+id_del,
success: function () {
$("#data_karyawan").DataTable().ajax.reload();
}
});
}
});
});
$('#editModal'). on('hidden.bs.modal', function () {
$('#formTerminal')[0].reset();
});
})
</script>
@endsection
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment