I have a DataTable in my View Index that has the CEP column that needs to have a zip code mask (ex: 29780-000). Does anyone know how to do this using JavaScript?
<table class="table table-hover table-bordered dataTable table-striped width-full center-header table-responsive" id="dtPrincipal">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CepId)
</th>
<th>
@Html.DisplayNameFor(model => model.Endereco)
</th>
<th>
@Html.DisplayNameFor(model => model.Complemento)
</th>
<th>
@Html.DisplayNameFor(model => model.Bairro)
</th>
<th>
@Html.DisplayNameFor(model => model.Cidade)
</th>
<th>
@Html.DisplayNameFor(model => model.UF)
</th>
@*<th>
@Html.DisplayNameFor(model => model.PadraoSistema)
</th>*@
<th>
@Html.DisplayName("Ações")
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.CepId)
</td>
<td>
@Html.DisplayFor(modelItem => item.Endereco)
</td>
<td>
@Html.DisplayFor(modelItem => item.Complemento)
</td>
<td>
@Html.DisplayFor(modelItem => item.Bairro)
</td>
<td>
@Html.DisplayFor(modelItem => item.Cidade)
</td>
<td>
@Html.DisplayFor(modelItem => item.UF)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.PadraoSistema)
</td>*@
<td>
<a title="Editar" asp-action="Edit" asp-route-id="@item.CepId" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row">
<span class="icon-2x wb-edit"></span>
</a>
<a title="Detalhes" asp-action="Details" asp-route-id="@item.CepId" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default footable-row-detail-row">
<span class="icon-2x wb-search"></span>
</a>
<a title="Excluir" asp-action="Delete" asp-route-id="@item.CepId" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row">
<span class="icon-2x wb-trash"></span>
</a>
<a title="Histórico" class="btn btn-sm btn-icon btn-pure btn-default on-default clockpicker" data-id="@item.CepId" data-toggle="modal" data-target="#pessoaHistory" data-original-title="Histórico">
<span class="icon-2x wb-time"></span>
</a>
</td>
</tr>
}
</tbody>
</table>
<script type="text/javascript">
$('#dtPrincipal').DataTable({
"columnDefs": [
{ className: "align-center", "targets": [5,6] },
{ className: "align-right", "targets": [0] }
],
language: {
"sEmptyTable": "Nenhum registro encontrado",
"sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
"sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
"sInfoFiltered": "(Filtrados de _MAX_ registros)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ resultados por página",
"sLoadingRecords": "Carregando...",
"sProcessing": "Processando...",
"sZeroRecords": "Nenhum registro encontrado",
"sSearch": "Pesquisar",
"searchPlaceholder": "Pesquise qualquer coisa",
"oPaginate": {
"sNext": "Próximo",
"sPrevious": "Anterior",
"sFirst": "Primeiro",
"sLast": "Último"
},
"oAria": {
"sSortAscending": ": Ordenar colunas de forma ascendente",
"sSortDescending": ": Ordenar colunas de forma descendente"
}
}
});