hyperlink com imagem em Datatable.net

05/09/2016

0

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:

@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

Adriano Cordeiro

Responder

Posts

13/09/2016

Adriano Cordeiro

Alguma sugestão ?
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar