I have to load a list of ceps with almost 1 million records in GRID. So as not to be slow, I decided to use the "DataTable" feature and do loading, filters and paging using JavaScrip according to this tutorial:
link .
Charging is not working. I can not call the Index 2 method and pass parameters ... I do not know what's wrong ... Does anyone know how to help me?
I can only load the DataTable Header as shown below:
//MyRepository
public IQueryable GetAllCep(string filter, int initialPage, int pageSize, int totalRecords, int recordsFiltered)
{
var data = Db.Cep.AsQueryable();
totalRecords = data.Count();
if (!string.IsNullOrEmpty(filter))
{
data = data.Where(x => x.CepId.Contains(filter));
}
recordsFiltered = data.Count();
data = data
.OrderBy(x => x.CepId)
.Skip(initialPage * pageSize)
.Take(pageSize);
return data;
}
[HttpGet]
[AllowAnonymous]
[Route("cep-gerenciamento/listar-todos")]
public IActionResult Index()
{
// return View(_cepAppService.GetAll());
return View();
}
[HttpPost]
[AllowAnonymous]
[Route("cep-gerenciamento/listar-todos")]
public string Index(int? draw, int? start, int? lenght)
{
var search = Request.Query["search[value]"];
var totalRecords = 0;
var recordsFiltered = 0;
start = start.HasValue ? start / 10 : 0;
var ceps = _cepAppService.GetAllCep(search, start.Value, lenght ?? 10, totalRecords, recordsFiltered);
return JsonConvert.SerializeObject(ceps);
}
@{
ViewData["Title"] = "Index";
}
<div class="panel animsition">
<div class="page-header">
<h1 class="page-title">@ViewData["Title"]</h1>
<ol class="breadcrumb">
<li><a asp-action="Index" asp-controller="Home">Home</a></li>
<li class="active">cep-gerenciamento/listar-todos</li>
</ol>
<div class="page-header-actions">
<div class="btn-group btn-group-sm"
role="group">
<a id="btnNovo" asp-action="Create" data-modal="" class="btn btn-outline btn-default new" data-toggle="tooltip"
data-original-title="Cadastrar Novo" data-container="body">
<span title="Cadastrar Novo" class="icon wb-plus"></span> Cadastrar Novo
</a>
<button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
data-original-title="Configurações" data-container="body">
<i class="icon wb-settings" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
data-original-title="Exportar" data-container="body">
<i class="icon wb-upload" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
data-original-title="Importar" data-container="body">
<i class="icon wb-download" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
data-original-title="Imprimir" data-container="body">
<i class="icon wb-print" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
data-original-title="Pesquisa Avançada" data-container="body">
<i class="icon wb-search" aria-hidden="true"></i>
<span class="hidden-xs">Pesquisa Avançada</span>
</button>
</div>
</div>
</div>
<div class="page-content">
<table data-url="@Url.Action("cep-gerenciamento/listar-todos")" class="table table-bordered dataTable table-striped" id="dataTableId">
<thead>
<tr>
<th>Cep</th>
<th>Endereco</th>
<th>Complemento</th>
<th>Bairro</th>
<th>Cidade</th>
<th>UF</th>
<th>PadraoSistema</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
@section scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
var dataTable = {
table: null,
initializeDataTable: function () {
var $tabela = $(".table-striped");
dataTable.table = $tabela.dataTable({
processing: true,
serverSide: true,
"aLenghtMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
ajax:
{
url: $tabela.prop("data-url"),
type: "POST"
},
"columns": [
{ "data": "Cep" },
{ "data": "Endereco" },
{ "data": "Complemento" },
{ "data": "Bairro" },
{ "data": "Cidade" },
{ "data": "UF" },
{ "data": "PadraoSistema" }
],
"columnDefs": [
{
"render": function (data, type, row) {
var inner = '<div class="btn-group">' +
'<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
'Actions' +
'</button>' +
'<div class="dropdown-menu">' +
'<a class="dropdown-item btn btn-default edit data-id="' + row.Id + '" href="#">Edit</a>' +
'<a class="dropdown-item btn btn-danger delete data-id="' + row.Id + '" href="#">Delete</a>' +
'</div>' +
'</div>';
return inner;
},
"targets": -1
}
],
"pagingType": "full-numbers"
});
dataTable.table.on('draw', function () {
$('button[data-type="delete"]').click(function () {
var $button = $(this);
});
$('button[data-type="edit"]').click(function () {
});
});
}
, getData: function () {
if (dataTable.table == null)
dataTable.initializeDataTable();
else
dataTable.table.ajax.reload();
}
}
$(document).read(function () {
dataTable.getData();
});
</script>
}
