View difference between Paste ID: fxPxYDBy and 5AU2VNhp

 var TableAjax = function () {
     var initPickers = function () {
         // Init date pickers
         $('.date-picker').datepicker({
             rtl: Metronic.isRTL(),
             autoclose: true
         });
     }
 
     var handleRecords = function () {
-        var grid = new Datatable();
+//sesuaikan
 		var grid = $("#datatable_ajax").DataTable({
-        grid.init({
+			"ajax": {
-            src: $("#datatable_ajax"),
+
                     'serverSide': true,
                     'url': 'http://localhost:8000/bank/index', // Ajax source
                     'dataSrc': 'data', // Used to tell DataTables where the data array is in the JSON structure
                     'type': 'GET'
                 }
 		}
 		);
 
         var grid0 = new Datatable();
 
         grid0.init({
             src: $("#datatable_ajax0"),
             onSuccess: function (grid) {
                 // Execute some code after table records loaded
                 ubah(grid);
             },
             onError: function (grid) {
                 // Execute some code on network or other general error
             },
             onDataLoad: function(grid) {
                 // Execute some code on ajax data load
             },
             loadingMessage: 'Loading...',
             dataTable: {
                 /**
                  *  Here you can define a typical datatable settings from http://datatables.net/usage/options
                  *  uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
                  *  setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/scripts/datatable.js).
                  *  So when dropdowns used the scrollable div should be removed.
                  *  "dom": "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
                  */
 
                 "bStateSave": true, // Save datatable state(pagination, sort, etc) in cookie.
                 "lengthMenu": [
                     [10, 20, 50, 100, 150, -1],
                     [10, 20, 50, 100, 150, "All"] // Change per page values here
                 ],
                 "pageLength": 10, // Default record count per page
                 "ajax": {
                     'processing': true,
                     'serverSide': true,
                     'url': 'http://localhost:8000/bank/index', // Ajax source
                     'dataSrc': 'data', // Used to tell DataTables where the data array is in the JSON structure
                     'type': 'GET'
                 },
                 /**
                  * Note that the data parameter format shown here can be used with a simplified DataTables initialisation as data is the default property that
                  * DataTables looks for in the source data object
                  * */
                 "columns" : [
                     {data: 'nama_bank'},
                     {data: 'created_at'},
                     {data: 'updated_at'},
                 ],
                 "columnDefs": [ {
                     "targets": 3,
                     "data": {
                         data: 'id'
                     },
                     'render' : function(data, type, row, meta){
                         return '<button type="button" class="btn btn-md btn-primary" data-id="'+data.id+'" onClick="ganti('+data.id+')" data-toggle="modal" href="#responsive">Edit</button> \
                         <button type="button" class="btn btn-md btn-danger" data-id="'+data.id+'" onClick="return confirm() && hapus('+data.id+')">Delete</button>';
                     }
                 } ]
             }
         });
 
         // Handle group actionsubmit button click
         grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
             e.preventDefault();
             var action = $(".table-group-action-input", grid.getTableWrapper());
             if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
                 grid.setAjaxParam("customActionType", "group_action");
                 grid.setAjaxParam("customActionName", action.val());
                 grid.setAjaxParam("id", grid.getSelectedRows());
                 grid.getDataTable().ajax.reload();
                 grid.clearAjaxParams();
             } else if (action.val() == "") {
                 Metronic.alert({
                     type: 'danger',
                     icon: 'warning',
                     message: 'Please select an action',
                     container: grid.getTableWrapper(),
                     place: 'prepend'
                 });
             } else if (grid.getSelectedRowsCount() === 0) {
                 Metronic.alert({
                     type: 'danger',
                     icon: 'warning',
                     message: 'No record selected',
                     container: grid.getTableWrapper(),
                     place: 'prepend'
                 });
             }
         });
     };
 
     return {
         // Main function to initiate the module
         init: function () {
             initPickers();
             handleRecords();
         }
     };
 }();
 
 // Show Data
 function lihat() {
 
 }
 
 // Delete Data
 function hapus(data) {
     var id_delete_val = data;
 
     $.ajax({
         'url': 'http://localhost:8000/bank/delete/'+id_delete_val,
         'type': 'DELETE',
         'data': {id:id_delete_val},
 
         success:function(data) {
             $('#success').html('<div id="prefix_732904980324" class="Metronic-alerts alert alert-success fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>'+data.message+'</div>');
         }
     })
 }
 
 // Edit Data
 function ganti(data) {
     var id_ganti_val = data;
 
     $.ajax({
         'url': 'http://localhost:8000/bank/show/'+id_ganti_val,
         'type': 'GET',
         'data': {id:id_ganti_val},
 
         success:function(data) {
             $('#id_bank_edit').val(data.id);
             $('#nama_bank_edit').val(data.nama_bank)
             $('#bank_nama_title').html(data.nama_bank)
         }
     })
 }
 
 // Ubah Data
 function ubah(grid) {
     var update_id_bank = $('#id_bank_edit').val();
     var update_nama_bank = $('#nama_bank_edit').val();
 
     $.ajax({
         url: 'http://localhost:8000/bank/update/'+update_id_bank,
         type: 'PUT',
         data: {id:update_id_bank, nama_bank:update_nama_bank},
 
         // Success response
         success:function(data) {
             $('#nama_bank').val('');
             $('#success_update').html('<div id="prefix_732904980324" class="Metronic-alerts alert alert-success fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>'+data.message+'</div>');
             grid.draw();
         },
 
         // Error response
         error: function (request, status, error) {
             $('#danger_update').html('<div id="prefix_732904980324" class="Metronic-alerts alert alert-danger fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>'+request.responseJSON.nama_bank+'</div>');
         }
     });
 }