Membuat Daftar Data Menggunakan Data Table

Berikut cara membuat listing menggunakan dataTables:

//css : jquery.dataTables.min.css

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>

//js : jquery.dataTables.min.js

<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>

<form method="POST" action="<?php echo base_url('skpd/struktur_organisasi/proses_input_keg/' . $id_personil); ?>" enctype='multipart/form-data' class="formtambahpaket">
<input type="hidden" name="id_personil" value="<?php echo $id_personil; ?>">

<table class="tabel table-bordered" width="100%" id="table">
<thead>
<tr>
<th class="txt-c" width="70%">Kegiatan</th>
<th class="txt-c" width="25%">Nama Staff</th>
<th class="txt-c" width="5%" style="position: relative;"><input type="checkbox" id="flowcheckall" value="" title="Pilih Semua" /> <span style="">Pilih Semua</span></th>
</tr>
</thead>
<?php foreach ($get_kegiatan as $row) { ?>
<tr>
<td>Text</td>
<td>Text</td>
<td align="center">
<input class="cek" type="checkbox" name="keg[]" value="<?php echo $row->keg_key;?>"><label for=""></label>
</td>
</tr>
<?php } ?>
</table>

<div class="form-group" style="padding-top: 20px; margin-bottom: -20px; text-align: center;">

<div class="col-md-12 pull-right">
<button class="btn btn-success" id="add" type="submit">Simpan</button>
<button class="btn btn-danger" type="button" onclick="$.fancybox.close()">Batal</button>
</div>

</form>

<script type="text/javascript">
$(document).ready(function () {
var oTable = $('#table').DataTable({
"paging": true,
"ordering": false,
"info": false,
"bFilter": true,
"bLengthChange": false,
"iDisplayLength": 10, "responsive": true,
"language": {
"sSearch": "Cari",
"zeroRecords": "Maaf data tidak ditemukan!",
"infoEmpty": "Data yang dicari tidak ditemukan!"
}
});

$('#flowcheckall').click(function (e) {
var chk = $(this).prop('checked');
$('input', oTable.$('tr', {"filter": "applied"})).prop('checked', chk);
});

$('input[name=cariiii]').on("keyup", function (e) {
value = $(this).val();
if (value.length > 3) { //
oTable.columns(0).search(this.value).draw();
} else if (value.length === 0) {
oTable.columns(0).search(this.value).draw();
}
console.log(value);
});

$("form").submit(function (event) {
var data = oTable.$(".cek:checked", {"page": "all"});
var uniq_kode = [];
data.each(function (index, elem) {
uniq_kode [index] = $(elem).val();
});
// alert(uniq_kode);
// return false;
$("#add").text("menyimpan..");
event.preventDefault();
$.ajax({
url: "<?php echo base_url($urlnya . '/proses_input_keg/' . $id_personil); ?>",
type: 'POST',
data: {keg: uniq_kode}, //$(this).serialize()
success: function () {
setTimeout(function () {
//alert("Data berhasil ditambahkan!");
$.fancybox.close();
setTimeout(function () {
window.location.reload();
}, 500);
}, 500);
}
});
});
});
</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.