Como pegar o conteúdo de uma coluna (id) ao clicar em um link exibido em outra coluna?

12/05/2015

0

Oi.

Estou utilizando JQuery dataTable, no ASP.NET MVC 5 para exibir uma tabela, em uma das colunas eu acrescentei um link para editar o registro. Mas não estou conseguindo incluir no link o id do registro.

Alguém pode me dar alguma orientação sobre isso.

Antecipadamente, agradeço.

Diógenes
Diógenes Freitas

Diógenes Freitas

Responder

Post mais votado

13/05/2015

Bom, acho essa forma um pouco "complexa", se essa for a palavra que quero dizer. Mas, basta você selecionar o Obj[ ] por linha, e retornar via ajax para a action que você necessita. Seu dataTable ficaria assim:

<script type="text/javascript">    
    $(document).ready(function () {
        $('#myDataTable').dataTable({
            bProcessing: true,         
            sAjaxSource: '@Url.Action("Index1", "Default1")',
            aoColumns: [
                      null, // first column (RoleId)
                      null, // second column (RoleName)  
                      null, // third (UserId)
                      null, // fourth (UserName)

                      {     // fifth column (Edit link)
                        "sName": "RoleId",
                        "bSearchable": false,
                        "bSortable": false,
                        "fnRender": function (oObj)                              
                        {
                            // oObj.aData[0] returns the RoleId
                            return "<a href='/Edit?id=" 
                                + oObj.aData[0] + "'>Edit</a>";
                        }
                       }

                   ]
     });  
}); 
</script>


Caso tenha alguma dúvida, este tutorial explica como fazer isso.
E nesta resposta, explica como fazer também.

Qualquer dúvida, pode retornar que te ajudo novamente.

Randrade

Randrade
Responder

Mais Posts

12/05/2015

Randrade

Bom, se você está utilizando um dataTable padrão, basta você adicionar este código em sua tabela:

<table>
           <thead>
                        <tr>
                            <th>
                                Código
                            </th>
                            <th>
                                Nome
                            </th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Codigo)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Nome)
                                </td>
                                <td align="center">
                                    <a href="@Url.Action("Editar", new {id = item.Codigo})" class="btn btn-primary btn-xs">
                                        <span class="glyphicon glyphicon-user" />
                                        Editar
                                    </a>
                                    <a href="@Url.Action("Editar", new {id = item.Codigo})" class="btn btn-danger btn-xs">
                                        <span class="glyphicon glyphicon-trash" />
                                        Excluir
                                    </a>
                                </td>
                            </tr>
                        }

                    </tbody>
                </table>


Neste exemplo eu estou utilizando Bootstrap, para deixar um "visual" melhor. Porém, o importante é esta linha:
<a href="@Url.Action("Editar", new {id = item.Codigo})" class="btn btn-danger btn-xs">
                                        <span class="glyphicon glyphicon-trash" />
                                        Excluir
                                    </a>


Onde você chama a Action, em meu caso "Editar", e passa o id da linha, no "new {id = item.Codigo})".

Qualquer dúvida, poste seu dataTable que faço um exemplo baseado em seu código.

P.S: Você pode usar isso com Html.ActionLink, Url.Action, Ajax, e o que mais você quiser.
Responder

12/05/2015

Diógenes Freitas

Obrigado Randrade, mas não tem como usar essa solução no meu caso.
Vou mandar o meu código para você ver.


@{
    ViewBag.Title = "Index";
}

<h2>jQuery DataTables/ASP.NET MVC Integration</h2>

<div id="container">
    <div id="demo">
        @using (Html.BeginForm("Localiza", "Home", FormMethod.Post))
        {
             <hr />

            <table id="myDataTable" class="display">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Estado</th>
                        <th>Cidade</th>
                        <th>Bairro</th>
                        <th>Nome</th>
                        <th>CEP</th>
                        <th>Endereço</th>
                        <th>Telefone</th>
                        <th>Celulares</th>
                        <th>Editar</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>Estado</th>
                        <th>Cidade</th>
                        <th>Bairro</th>
                        <th>Nome</th>
                        <th>CEP</th>
                        <th>Endereço</th>
                        <th>Telefone</th>
                        <th>Celulares</th>
                        <th>Editar</th>
                    </tr>
                </tfoot>
            </table>
        }
    </div>
</div>

@section Scripts
{
    <script type="text/javascript" src="~/Scripts/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.11.4.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jQuery.dataTables.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.dataTables.columnFilter-1.5.6.js"></script>
    <script type="text/javascript" src="~/Scripts/dataTables.tableTools.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.jeditable.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.dataTables.editable.js"></script>
    <script type="text/javascript" src="~/Scripts/indexDT.js"></script>
}


$(document).ready(function () {

    var oTable = $('#myDataTable').dataTable({
        "bStateSave": false,
        "bJQueryUI": true,
        "bServerSide": true,
        "sAjaxSource": "DataTable/AjaxHandler",
        "bProcessing": true,
        "bSort": true,
        "sPaginationType": "full_numbers",
        "order": [[1, "asc"], [2, "asc"], [3, "asc"], [4, "asc"] ],
        "oLanguage": {
            "oPaginate": {
                "sFirst": "Primeira",
                "sLast": "Última",
                "sNext": "Próxima",
                "sPrevious": "Anterior"
            },
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando _START_ até _END_ de _TOTAL_ registros",
            "sLoadingRecords": "Aguarde, carregando registros ...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sInfoFiltered": "(selecionados de _MAX_ registros",
            "sProcessing": "Processando ...",
            "sSearch": "Filtro:",
            "sLengthMenu": 'Mostrar <select>' +
                           '<option value="10">10</option>' +
                           '<option value="20">20</option>' +
                           '<option value="30">30</option>' +
                           '<option value="40">40</option>' +
                           '<option value="50">50</option>' +
                           '<option value="-1">All</option>' +
                           '</select> registros por página'

        },
        "aoColumns": [
            {
                "sName": "IdPF",
                "bSearchable": false,
                "bSortable": false
            },
            {
                "sName": "LogrUF",
                "bSearchable": true,
                "bSortable": true,
                "asSortng": ["asc", "desc"]
            },
            {
                "sName": "LogrCidade",
                "bSearchable": true,
                "bSortable": true,
                "asSortng": ["asc", "desc"]
            },
            {
                "sName": "LogrBairroInicio",
                "bSearchable": true,
                "bSortable": true,
                "asSortng": ["asc", "desc"]
            },
			{
			    "sName": "Nome",
			    "bSearchable": true,
			    "bSortable": true,
			    "asSortng": ["asc", "desc"]
			},
            {
                "sName": "LogrCEP",
                "bSearchable": false,
                "bSortable": false
            },
			{
			    "sName": "Endereco",
			    "bSearchable": false,
			    "bSortable": false
			},
            {
                "sName": "Telefone",
                "bSearchable": false,
                "bSortable": false
            },
            {
                "sName": "Celular",
                "bSearchable": false,
                "bSortable": false
            },
            {
                "sName": "Editar",
                "bSearchable": false,
                "bSortable": false,
                "mData": null,
                "mRender": function (data, type, full) {
                    return '<td><a href="#" class = "glyphicon glyphicon-pencil" >editar</a></td>';
                }
            }
        ]
    }).columnFilter({
        sPlaceHolder: "head:before",
        aoColumns: [
            null,
            { type: "select", values: ["AC", "AL", "AM", "AP", "BA", "CE", "DF", "ES", "GO", "MA", "MG", "MS", "MT", "PA", "PB", "PE", "PI", "PR", "RJ", "RN", "RO", "RR", "RS", "SC", "SE", "SP", "TO"] },
            { type: "text" },
            { type: "text" },
            { type: "text" },
            null,
            null,
            null,
            null,
            null
        ]}).makeEditable();

});



Muito obrigado.
Diógenes
Responder

13/05/2015

Diógenes Freitas

Muito obrigado.

Vou testar esta solução.

Abraços.
Responder

13/09/2016

Adriano Cordeiro

Fiz um teste e não funciona:
$('.glyphicon-pencil').on('click',function () {
                        alert('oi');
                    });
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

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

Aceitar