Array
(
)

hyperlink com imagem em Datatable.net

Adriano Cordeiro
|
MVP
Pontos: 200
    05 set 2016

Preciso exibir uma janela Modal (bootstrap) quando clico no botão Excluir "X" do componente datatables.net, fiz algumas pesquisa, tentei fazer implementando os exemplos disponíveis no site porém sem sucesso, abaixo segue meu código completo:
HTML:
#Código

@model MercPan.Dominio.Entidade.Cliente
@{
    ViewBag.Title = "Cliente";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm())
{
    <input type="hidden" id="hidClienteID" name="hidClienteID" value="" />
    <div class="row">
        <fieldset>
            <legend>CADASTRO DE CLIENTE</legend>
            <p>
                <button type="button" id="btnNovoCliente" class="btn btn-primary">NOVO CLIENTE</button>
            </p>
            <table id="tblCLiente" class="table table-hover table-bordered table-condensed table-responsive table-striped small" style="cursor:pointer">
                <thead>
                    <tr>
                        <th></th>
                        <th>Nome</th>
                        <th>Razão Social</th>
                        <th>Tipo</th>
                        <th>CNPJ/CPF</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </fieldset>
        </div>
    
        <div class="modal fade" id="modalCliente" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header bg-warning">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title text-danger" id="deleteModalLabel">ATENÇÃO !</h4>
                    </div>
                    <div class="modal-body">

                    </div>
                    <div class="modal-footer">

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        }

        @section Scripts {

            @Scripts.Render("~/bundles/DataTables")

            <script type="text/javascript">

                $(document).ready(function() {
                    $('.dropdown-toggle').dropdown();
                    
                    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
                    //$.fn.dataTable.isDataTable('#tblCLiente')
                    var table = $("#tblCLiente").DataTable({
                        "bProcessing": true,
                        "bServerSide": true,
                        "bFilter": true,
                        "bInfo": false,
                        "pageLength": 5,
                        "bLengthChange": true,
                        "bSort": true,
                        "dom": '<"top"f>lt<"bottom"p><"clear">',
                        "language": {
                            "sEmptyTable": "Nenhum registro encontrado",
                            "sInfo": "Exibindo de _START_ até _END_ no total de _TOTAL_ registros.",
                            "sInfoEmpty": "",
                            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                            "sInfoPostFix": "",
                            "sInfoThousands": ".",
                            "sLengthMenu": "_MENU_ itens por página",
                            "sLoadingRecords": "Carregando...",
                            "sProcessing": "Processando...",
                            "sZeroRecords": "Nenhum registro encontrado.",
                            "sSearch": "Pesquisar: ",
                            "oPaginate": {
                                "sNext": "Próximo",
                                "sPrevious": "Anterior",
                                "sFirst": "Primeiro",
                                "sLast": "Último"
                            },
                        },
                        //"contentType": 'application/json; charset=utf-8',
                        "sAjaxSource": "/Cliente/MontarGridCliente",
                        //"type": "POST",
                        "sPaginationType": "full_numbers",
                        "deferRender": true,
                        "aoColumns": [
                                        { "sName": "ClienteID", "mData": "ClienteID", "bVisible": false, "searchable": false },
                                        { "sName": "NomeCliente", "mData": "NomeCliente", "sWidth": "30%" },
                                        { "sName": "RazaoSocial", "mData": "RazaoSocial", "sWidth": "40%" },
                                        {
                                            "mRender": function (data, type, full) {
                                                var _tipo = full['TipoPessoa'];
                                                if (_tipo == 'PJ') {
                                                    return 'PJ';
                                                } else {
                                                    return 'PF';
                                                };
                                                return '';
                                            }
                                        },
                                        { "sName": "CNPJ", "mData": "CNPJ", "sWidth": "20%" },
                                        {
                                            "mRender": function (data, type, full) {
                                                var situacao = full['Status'];
                                                if (situacao == true) {
                                                    return 'ATIVO';
                                                } else {
                                                    return 'INATIVO';
                                                };
                                                return '';
                                            }
                                        },
                                        {
                                            "mRender": function (data, type, full) {
                                                var intId = full['ClienteID'];
                                                return '<a href="#" class="text-success lnkalterar" data-id="' + intId + '" value="' + intId + '" ><img title="Editar2" src="/Imagens/editarFlat.png" style="height:18px;width:19px;" /></a>';

                                            }
                                        }
                        ],
                        "rowCallback": function (row, data) {
                            $(row).attr("data-id", data.ClienteID);
                        }
                    });

                    //LINK ABRIR MODAL ATRAVÉS DA LINHA DO GRID - ALTERAR
                    $('.lnkalterar').click(function (e) {
                        e.preventDefault();
                        
                        var id = $(this).attr('data-id');
                        $("#hidClienteID").val(id);
                        $('#modalCliente').modal();
                        $("#modalCliente .modal-body").html('<div>DESEJA ALTERAR DADOS DO CLIENTE ?"</div>');
                    });

                });

            </script>
        }

Adriano Cordeiro
|
MVP
Pontos: 200
    13 set 2016

Alguma sugestão ?