Menambahkan Data JSON ke Datatable

Bagaimana cara menambahkan data JSON ke datatable, jika sudah punya data dalam format JSON kita tinggal gunakan saja, jika data masih bentuk array dari database ya kita konversi dulu ke format JSON, idenya seperti itu. untuk cara konversi data array dari database kalo di PHP kia tinggal gunakan json_encode saja. Masih bingung silahkan hubungi saya di contact person

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href=" https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<html>
<body>
    <div class="container">
        <table id="my_logs" class="table table-striped table-bordered" style="width:100%">
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div> 
</body>

Code Javascript data JSON sudah tersedia dengan format JSON pada Variable logs

[{ "log_time": "2019-08-27", "user_name": "Me", "class_name": "login", "class_function": "authentication", "action_title": "User login", "action_description": "I am logged in" }, { "log_time": "2019-08-17", "user_name": "me", "class_name": "dashboard", "class_function": "index", "action_title": "Admin dashboard", "action_description": "I am logged in" }]
<script type="text/javascript">
$(document).ready(function () {
 
 var myTable = $('#my_logs').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "data": [],
        "columns": [{
            "title": "Date",
            "data": "log_time"
        }, {
            "title": "User Name",
            "data": "user_name"
        }, {
            "title": "Class",
            "data": "class_name"
        }, {
            "title": "Function",
            "data": "class_function"
        }, {
            "title": "Action",
            "data": "action_title"
        }, {
            "title": "Description",
            "data": "action_description"
        }]
    });
    
    var logs = [{ "log_time": "2019-08-27", "user_name": "Me", "class_name": "login", "class_function": "authentication", "action_title": "User login", "action_description": "I am logged in" }, { "log_time": "2019-08-17", "user_name": "me", "class_name": "dashboard", "class_function": "index", "action_title": "Admin dashboard", "action_description": "I am logged in" }];
    myTable.clear();
    $.each(logs, function(index, value) {
        myTable.row.add(value);
    });
    myTable.draw();
});
</script>

Data JSON dari URL misal http://localhost/APICI/index.php/api/cektable , hasil dari URL tersebut sama dengan data JSON di atas.

let url = 'http://localhost/APICI/index.php/api/cektable';
fetch(url)
	.then(res => res.json())
	.then((out) => {
		var logs = out;
		myTable.clear();
		$.each(logs, function (index, value) {
			myTable.row.add(value);
		});
		myTable.draw();
	})
	.catch(err => {
		throw err
	});

Full Program

Leave a Reply

Your email address will not be published. Required fields are marked *