DataTable_new

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

    var handleRecords = function () {
        var grid = $("#datatable_ajax").DataTable({
            "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'
            },
            "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>';
                }
            }]
        });

        setInterval( function () {
            grid.ajax.reload();
        }, 5000);
    };

    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() {
    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>');
        },

        // 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>');
        }
    });
}