1. download CSS&JS datatable klik disini
2. panggil css pada template dengan pemanggilan datatable sebagai berikut
<!--letakkan didaerah<head>sopianaji.blogspot.com-->
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/backend/datatables/css/bootstrap-editable.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/backend/datatables/css/bootstrap-table.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/backend/datatables/css/bootstrap-table.css">
<!--atau sebelum</head> sopianaji.blogspot.com-->
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/backend/datatables/css/bootstrap-editable.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/backend/datatables/css/bootstrap-table.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/backend/datatables/css/bootstrap-table.css">
<!--atau sebelum</head> sopianaji.blogspot.com-->
3. panggil js pada template dengan pemanggilan datatable sebagai berikut
<!--letakan didaerah<footer>sopianaji.blogspot.com-->
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/tableExport.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/data-table-active.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table-editable.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-editable.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table-resizable.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/colResizable-1.5.source.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table-export.js"></script>
<!--atau sebelum</body>sopianaji.blogspot.com-->
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/tableExport.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/data-table-active.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table-editable.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-editable.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table-resizable.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/colResizable-1.5.source.js"></script>
<script src="<?php echo base_url(); ?>assets/backend/datatables/js/bootstrap-table-export.js"></script>
<!--atau sebelum</body>sopianaji.blogspot.com-->
4. HTML view pada read, dengan memanggil class table sebagai berikut
<!--html view table-->
<div id="toolbar">
<a href="" title="Ganti tombol sesuai dengan kebutuhan"> <button type="button" class="btn btn-default">Tambah</button> </a>
</div>
<table id="table" data-toggle="table" data-pagination="true" data-search="true" data-show-export="true" data-toolbar="#toolbar">
<!--end html view table-->
<div id="toolbar">
<a href="" title="Ganti tombol sesuai dengan kebutuhan"> <button type="button" class="btn btn-default">Tambah</button> </a>
</div>
<table id="table" data-toggle="table" data-pagination="true" data-search="true" data-show-export="true" data-toolbar="#toolbar">
<!--end html view table-->
untuk lebih jelasnya lihat tutorial klik disini
alternatif cara lainnya online(aksi akan berjalan dalam keadaan online saja) langsung dari datatables.net
Tidak ada komentar:
Posting Komentar