<!-- <link rel="stylesheet" href="templates/Assets/css/ajusta.css">
<link rel="stylesheet" href="templates/Assets/css/bootstrap.min.css">
<link rel="stylesheet" href="templates/Assets/css/font-awesome.min.css"> -->

<body onload="viewData()">
    <div class="BodyContainer">
        <div class="table-responsive">
            <table id="tabledit" class="table table-bordered table-striped">
                <center>
                    <a class="btn btn btn-success" href='index.php?ToDo=runAddon&addon=addon_bannerimg&func=add'><i class="fa fa-plus" aria-hidden="true"></i> Adicionar Banner</a>
                    <a class="btn btn-danger" href='index.php?ToDo=runAddon&addon=addon_bannerimg&func=ordenar'><i class="fa fa-sort" aria-hidden="true"></i> Ordenar Banner</a>
                </center></br>
                <thead>
                    <tr>
                        <th></th>
                        <th width="20%">Imagem</th>
                        <th>Link</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <script src="templates/Assets/js/jquery-3.1.1.min.js"></script>
    <script src="templates/Assets/js/dataTables.bootstrap.min.js"></script>
    <script src="templates/Assets/js/jquery.tabledit.js"></script>
    <script>
    function viewData(){
        $.ajax({
            url: 'includes/functions/banner.php?p=view',
            method: 'GET'
        }).done(function(data){
            $('tbody').html(data)
            tableData()
        })
    }
    function tableData(){
        $('#tabledit').Tabledit({
            url: 'includes/functions/banner.php',
            eventType: 'dblclick',
            dangerClass: 'success',
            editButton: true,
            deleteButton: true,
            hideIdentifier: true,
            restoreButton: false,
            buttons: {
                edit: {
                    class: 'btn btn-sm btn-warning',
                    html: '<span class="glyphicon glyphicon-pencil"></span> Editar',
                    action: 'edit'
                },
                delete: {
                    class: 'btn btn-sm btn-warning',
                    html: '<span class="glyphicon glyphicon-trash"></span> Excluir',
                    action: 'delete'
                },
                save: {
                    class: 'btn btn-sm btn-success',
                    html: 'Salvar Edição'
                },
                confirm: {
                class: 'btn btn-sm btn-warning',
                html: 'Confirmar Exclusão'
                }
                
            },
            columns: {
                identifier: [0, 'idImg'],
                editable: [[2, 'urlImg']]
            },
            onSuccess: function(data, textStatus, jqXHR) {
                viewData()
            },
            onFail: function(jqXHR, textStatus, errorThrown) {
                console.log('onFail(jqXHR, textStatus, errorThrown)');
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            onAjax: function(action, serialize) {
                console.log('onAjax(action, serialize)');
                console.log(action);
                console.log(serialize);
            }
        });
    }
    </script>
</body>