Js Full

var TableAjax = function () {
    var initPickers = function () {
        // Init date pickers
        $('.date-picker').datepicker({
            rtl: Metronic.isRTL(),
            autoclose: true
        });
    }

    var handleRecords = function () {
        var grid = new Datatable();

        grid.init({
            src: $("#datatable_ajax"),
            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>');
        }
    });
}