Процесс рендеринга ушел в Google Chrome при добавлении 100 000 строк в таблицу данных - PullRequest
0 голосов
/ 12 октября 2019

Я загружаю 100 000 строк данных из моего php BackEnd, используя Ajax следующим образом:

  1. Сначала при вызове ajax получаем количество строк, "кусков" страниц и общее количество записей для загрузки изсобытие щелчка (я уже пробовал с 10K строк до 50K строк, и все работает нормально).
 $('#btnObtenerData').on('click', (e) => {
            $.ajax({
                url: 'getData.php',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    "accion": "getConteo"
                }
            }).done((response) => {
                totalPaginas = response.totalPaginas,
                    totalFilas = response.totalFilas;
                console.log(totalPaginas, totalFilas);
                if (totalPaginas > 0) {
                    cargarPaginas(totalFilas, totalPaginas);
                }
            })
        });
Как только первый вызов завершен cargarPaginas , эта функция содержит следующий код.
     function cargarPaginas(totalFilas, totalPaginas) {
            //paginar(1,totalFilas,totalPaginas);
            let arr = [];
            let pages = totalPaginas;
            for (var i = 0; i < totalPaginas; i++) {
                console.log(totalPaginas);
                arr.push({
                    page: i + 1,
                    rows: totalFilas,
                    pages: pages
                });
            }
            var p = $.when();
            arr.forEach(function(item, key) {
                p = p.then(function() {
                    return paginar(item.page, item.rows, item.pages);
                });
            });
        }

И getPagina y paginar также запускает следующий код

      function getPagina(numeroPagina) {
            let pagina = $("#paginacion").find('a.activa');
            $("#tbodyReporte").find("[data-pagina='" + numeroPagina + "']").css("display", "");
            $("#tbodyReporte").children("tr[data-pagina!='" + numeroPagina + "']").css("display", "none");
            $(pagina).trigger('click');
        }

        function paginar(paginaNumero = 1, totalFilas = 1000, totalPaginas = 0) {
            return $.ajax({
                url: 'getData.php',
                type: 'GET',
                dataType: 'JSON',
                data: {
                    accion: "getData",
                    "numeroPagina": paginaNumero,
                    "numeroFilas": totalFilas
                }
            }).done((response) => {
                console.log(response);
                if (paginaNumero == 1) {
                    tabla = $('#gridReporte').DataTable({
                        data: response,
                        columns: [{
                                "data": "Factura"
                            },
                            {
                                "data": "Tipo de Servicio"
                            },
                            {
                                "data": "SERVICIO"
                            },
                            {
                                "data": "fecha de emision"
                            },
                            {
                                "data": "NContrato"
                            },
                            {
                                "data": "CLIENTE"
                            },
                            {
                                "data": "Tipo Pago"
                            },
                            {
                                "data": "CIUDAD"
                            },
                            {
                                "data": "COLONIA"
                            },
                            {
                                "data": "Oficial de Recuperacion"
                            },
                            {
                                "data": "MONEDA"
                            },
                            {
                                "data": "MORA"
                            },
                            {
                                "data": "Cargo por Servicio"
                            },
                            {
                                "data": "ISV"
                            },
                            {
                                "data": "Total Factura"
                            },
                            {
                                "data": "N Cliente"
                            },
                            {
                                "data": "Dia Mora"
                            },
                            {
                                "data": "NUMRECIBO"
                            },
                            {
                                "data": "Agente Mant Cartera"
                            },
                            {
                                "data": "Nombre Vendedor"
                            },
                            {
                                "data": "Clase Cliente"
                            },
                            {
                                "data": "Tipo Vendedor"
                            }
                        ],
                        dom: 'Bfrtip',
                        buttons: [
                            'excelHtml5'
                        ],
                        "language": idioma_spanol,
                        "pageLength": 500,
                        "columnDefs": [{
                            "targets": '_all',
                            "createdCell": function(td, cellData, rowData, row, col) {
                                $(td).css('padding', '1px');
                                $(td).css('margin', '0px');
                            }
                        }]
                    });
                } else {
                    tabla.rows.add(response)
                        .draw();
                }
            })
        }

Как я уже говорил, когда загружается 50К записей или меньше, все идет хорошо

successful load

Но когда я пытаюсь загрузитьболее 90K записывают сбой вкладки браузера:

enter image description here

Я хотел бы понять, почему это происходит? и как это исправить.

Спасибо за совет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...