1
function LlenarGrid() {
        $('#myTable').DataTable({
            destroy: true,
            "bFilter": true,
            "paging": true,
            "pageLength": 10,
            "ajax": {
                "url": "@Url.Action("ObtenerLocalidades", "Localidad")",
                "type": "POST",
                "datatype": "json",
                "dataSrc": function (json) {

                    var codigoRegreso = JSON.stringify(json.Respuesta.Codigo);
                    var codigoCorrecto = '"OK"';

                    if (codigoRegreso == codigoCorrecto) {
                        Utilidades.OcultarProgress();
                        return json.Respuesta.RespuestaInformacion.Data.Info;
                    }
                    else {
                        Utilidades.ErrorAjaxControlado(json);
                        return ""; //De alguna manera limpia el grid (como si no hubiera encontrado registros
                    }
                },
                data: {
                    Nombre: $('#txtLocalidad_B').val(),
                    Estado: $('#txtEstado_B').val(),
                    Municipio: $('#txtMunicipio_B').val(),
                    EsActivoFiltro: $('#cmbEstatus_B').val()

                },
                error: function (json) {
                    Utilidades.ErrorAjax(json);
                    //alert(json);
                    return ""; //De alguna manera limpia el grid (como si no hubiera encontrado registros
                },
            },
            "language": {
                "url": "@Url.Content("~/Estilo/DataTables/Spanish.txt")",
                "sSearch": "Filtrar :",
            },
            dom: 'lBfrtip',
            buttons: [
                    {
                        'text': '<img src="@Url.Content("~/Imagenes/Agregar.png")" class="imagBotones" style="max-width: 15px;max-height: 15px;" /> Agregar',
                        'className': 'btnAgregarGrid',
                        'action': function (e, dt, node, config) {
                            AgregarDetalle();
                        }
                    }
            ],
            "columns": [
               {
                   "data": "Estado", "autoWidth": true, "sClass": "columnaIzquierda",
                   "render": function (data, type, row, meta) {
                       if (type === 'display') {
                           return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar Estado">')
                           .wrap('<div></div>')
                           .text(data)
                           .parent()
                           .html();
                       }
                       else {
                           return data;
                       }
                   }
               },
                   {
                       "data": "Municipio", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar Municipio">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "Clave", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar Clave">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "Nombre", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar Nombre">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "IdSube", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar IdSube">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "IdSibec", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar IdSibec">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "IdAux1", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar IdAux1">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "IdAux2", "autoWidth": true, "sClass": "columnaIzquierda",
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar IdAux2">')
                               .wrap('<div></div>')
                               .text(data)
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   },
                   {
                       "data": "EsActivo", "autoWidth": true,
                       "render": function (data, type, row, meta) {
                           if (type === 'display') {
                               return $('<a  onmouseover="" style="cursor: pointer;" class="btnEditar Estatus">')
                               .wrap('<div></div>')
                               .text(data == true ? 'Si' : 'No')
                               .parent()
                               .html();
                           }
                           else {
                               return data;
                           }
                       }
                   }
            ]
        });
6
  • 1
    Es un problema de renderizado. Deberías utilizar algún sistema de renderizado por scroll o de filtrado para no traerte tantos resultados.
    – Héctor
    el 23 may. 2017 a las 16:25
  • Tal vez la mejor solución puede ser cargar solo la página respectiva.
    – Shaz
    el 23 may. 2017 a las 16:25
  • 1
    te sugiero usar Server-side, por otro lado veo que tienes sintaxis Razor si usas ASP .NET MVC puedes revisar este enlace que puede ayudarte en el Server-Side
    – JuankGlezz
    el 23 may. 2017 a las 17:08
  • ¿Realmente necesitas mostrar de golpe los 5mil registros? En casos así se utiliza una paginación, mostrando los primeros 25,50,100 registros y conforme el usuario vaya navegando, traes los demás registros. Los filtros se deben aplicar con cuidado (evitar inyecciones sql y xss). A nivel de base de datos, tener índices ayuda a incrementar la performance, de la misma manera si la consulta la tienes en un procedimiento almancenado :D Saludos
    – fredyfx
    el 23 may. 2017 a las 17:59
  • Puedes ver la pestaña de networking en el inspector del navegador. Primero descarta la demora del servidor, ya que podría ser que tus consultas no estén optimizadas. Una vez tuve que optimizar una consulta que tomaba 20 segundos... estaban en ciclos anidados. También es buen consejo el de @fredyfx ... el usuario jamas va a revisar mas de 100 filas, para esto se usan buscadores/filtros aparte el 23 may. 2017 a las 18:00

0

Examina otras preguntas con la etiqueta o formula tu propia pregunta.