I'm trying to show 5000 records and I'm using angularjs and c # mvc5 if it shows me all the records in the datatable just that it takes to show them, what can I do to optimize this and not be late, it's worth mentioning that in the console it shows the records at the time of loading the page only takes the time to display them in the html or datatable
controller.js
$http.get("Home/getMedidores").success(function (res) {
$scope.medidores = res.data;
console.log($scope.medidores)
})
driver c #
public ActionResult getMedidores()
{
string sucursal = Convert.ToString(Session["Sucursal"]);
if (sucursal == "Todas")
{
var data = db.Medidors.Where(x => x.activo == true).Select
(z => new
{
NumeroEconomico = z.num_economico,
Serie = z.serie,
Holograma = z.holograma,
Sello = z.sello,
Cuenta = z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.cuenta).FirstOrDefault() == null ? "No disponible" :
z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.cuenta).FirstOrDefault(),
Zona = z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.zona).FirstOrDefault() == null ? "No disponible" :
z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.zona).FirstOrDefault(),
Direccion = z.Transaccions.Where
(v => v.id_medidor == z.id_medidor).Select(c => c.catCuenta.direccionPadron).FirstOrDefault()
== null ? "No disponible" : z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.direccionPadron).FirstOrDefault(),
Marca = z.Marca.marca1,
Modelo = z.Modelo.modelo1,
Capacidad = z.Capacidad.capacidad1,
Electrocorrector = z.Electrocorrector.num_electro
== null ? "No disponible" : SqlFunctions.StringConvert((double)z.Electrocorrector.num_electro).Trim(),
Status = z.Status.status1,
FechaMovimiento = z.fecha_movimiento.ToString()
}).OrderBy(x => x.Zona).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}
else
{
var data = db.Medidors.Where(x => x.activo == true && x.Sucursal.nombre == sucursal).Select
(z => new
{
NumeroEconomico = z.num_economico,
Serie = z.serie,
Holograma = z.holograma,
Sello = z.sello,
Cuenta = z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.cuenta).FirstOrDefault() == null ? "No disponible" :
z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.cuenta).FirstOrDefault(),
Zona = z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.zona).FirstOrDefault() == null ? "No disponible" :
z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.zona).FirstOrDefault(),
Direccion = z.Transaccions.Where
(v => v.id_medidor == z.id_medidor).Select(c => c.catCuenta.direccionPadron).FirstOrDefault()
== null ? "No disponible" : z.Transaccions.Where(v => v.id_medidor == z.id_medidor).Select
(c => c.catCuenta.direccionPadron).FirstOrDefault(),
Marca = z.Marca.marca1,
Modelo = z.Modelo.modelo1,
Capacidad = z.Capacidad.capacidad1,
Electrocorrector = z.Electrocorrector.num_electro == null ? "No disponible" : SqlFunctions.StringConvert((double)z.Electrocorrector.num_electro).Trim(),
Status = z.Status.status1,
FechaMovimiento = z.fecha_movimiento
}).OrderBy(x => x.Zona).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}
}
html
<div class="text-center m-t-lg" ng-controller="MedidoresController">
<h1>
</h1>
<table datatable="ng" dt-options="dtOptions" class="table table-condensed table-hover dataTables-example">
<thead>
<tr>
<th>Numero Economico</th>
<th>Serie</th>
<th>Holograma</th>
<th>Sello</th>
<th>Cuenta</th>
<th>Zona</th>
<th>Direccion</th>
<th>Marca</th>
<th>Modelo</th>
<th>Capacidad</th>
<th>Electrocorrector</th>
<th>Status</th>
<th>Fecha de movimiento</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="medidor in medidores | orderBy:'NumeroEconomico'">
<td>{{ medidor.NumeroEconomico }}</td>
<td>{{ medidor.Serie }}</td>
<td>{{ medidor.Holograma }}</td>
<td>{{ medidor.Sello }}</td>
<td>{{ medidor.Cuenta }}</td>
<td>{{ medidor.Zona }}</td>
<td>{{ medidor.Direccion }}</td>
<td>{{ medidor.Marca }}</td>
<td>{{ medidor.Modelo }}</td>
<td>{{ medidor.Capacidad }}</td>
<td>{{ medidor.Electrocorrector }}</td>
<td>{{ medidor.Status }}</td>
<td>{{ medidor.FechaMovimiento }}</td>
</tr>
</tbody>
</table>
</div>