Advertisement
Guest User

Datatables modif kolom

a guest
Jan 20th, 2019
78
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.62 KB | None | 0 0
  1. <table class="table table-bordered table-striped" id="mytable">
  2.                 <thead>
  3.                     <tr>
  4.                         <th width="80px">No</th>
  5.                         <th>Judul</th>
  6.                         <th>Link</th>
  7.                         <th>Icon</th>
  8.                         <th>IsParent</th>
  9.                         <th>Status Aktif</th>
  10.                         <th width="100px">Action</th>
  11.                     </tr>
  12.                 </thead>
  13.        
  14.             </table>
  15.  
  16.    
  17.         <script src="<?php echo base_url('assets/js/jquery-1.11.2.min.js') ?>"></script>
  18.         <script src="<?php echo base_url('assets/datatables/jquery.dataTables.js') ?>"></script>
  19.         <script src="<?php echo base_url('assets/datatables/dataTables.bootstrap.js') ?>"></script>
  20.         <script type="text/javascript">
  21.             $(document).ready(function() {
  22.                 $.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings)
  23.                 {
  24.                     return {
  25.                         "iStart": oSettings._iDisplayStart,
  26.                         "iEnd": oSettings.fnDisplayEnd(),
  27.                         "iLength": oSettings._iDisplayLength,
  28.                         "iTotal": oSettings.fnRecordsTotal(),
  29.                         "iFilteredTotal": oSettings.fnRecordsDisplay(),
  30.                         "iPage": Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
  31.                         "iTotalPages": Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
  32.                     };
  33.                 };
  34.  
  35.                 var t = $("#mytable").dataTable({
  36.                     initComplete: function() {
  37.                         var api = this.api();
  38.                         $('#mytable_filter input')
  39.                                 .off('.DT')
  40.                                 .on('keyup.DT', function(e) {
  41.                                     if (e.keyCode == 13) {
  42.                                         api.search(this.value).draw();
  43.                             }
  44.                         });
  45.                     },
  46.                     oLanguage: {
  47.                         sProcessing: "loading..."
  48.                     },
  49.                     processing: true,
  50.                     serverSide: true,
  51.                     ajax: {"url": "menu_super_admin/json", "type": "POST"},
  52.                     columns: [
  53.                         {
  54.                             "data": "id",
  55.                             "orderable": false
  56.                         },{"data": "judul"},{"data": "link"},{"data": "icon"},{"data": "IsParent"},
  57.                         {"data": "status_aktif"},
  58.                         {
  59.                             "data" : "action",
  60.                             "orderable": false,
  61.                             "className" : "text-center"
  62.                         }
  63.                     ],
  64.                     order: [[0, 'desc']],
  65.                     rowCallback: function(row, data, iDisplayIndex) {
  66.                         var info = this.fnPagingInfo();
  67.                         var page = info.iPage;
  68.                         var length = info.iLength;
  69.                         var index = page * length + (iDisplayIndex + 1);
  70.                         $('td:eq(0)', row).html(index);
  71.                         var status = "";
  72.                         if(data.status_aktif == "Y"){
  73.                             status = "aktif";
  74.                         }else{
  75.                             status = "nonaktif";
  76.                         }
  77.                         $('td:eq(5)', row).html(status);
  78.                     }
  79.                 });
  80.             });
  81.         </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement