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
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
Curtir tópico
+ 0
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:
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.
<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
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:
Neste exemplo eu estou utilizando Bootstrap, para deixar um "visual" melhor. Porém, o importante é esta linha:
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.
<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.
Muito obrigado.
Diógenes
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/09/2016
Adriano Cordeiro
Fiz um teste e não funciona:
$('.glyphicon-pencil').on('click',function () {
alert('oi');
});
Responder
Clique aqui para fazer login e interagir na Comunidade :)