VERY slow loading of Ajax data (3.5)

NHSDevGuy commented 6 years ago

Hi all,

The following code takes about 22 seconds to display 219 rows of data, 2 seconds of which is doing the Ajax get:

            $("#MortalityDetails").tabulator({
                layout: "fitDataFill",
                history: false,
                data: json,
                columnVertAlign: "bottom",
                columns: [
                    //{ title: "primaryproceduredate", field: "primaryproceduredate", visible: false },
                    //{ title: "ppci", field: "ppci", visible: false },
                    //{ title: "MRGStatus", field: "MRGStatus", visible: false },
                    //{ title: "MRGStatus", field: "MRGStatus", visible: false },
                    //{ title: "ReviewOutcome", field: "ReviewOutcome", visible: false },
                    //{ title: "MRGDate", field: "MRGDate", visible: false },
                    //{ title: "MRGRecommendtaion", field: "MRGRecommendtaion", visible: false },
                    //{ title: "RecommendationVehicle", field: "RecommendationVehicle", visible: false },
                    //{ title: "Category", field: "Category", visible: false },
                    //{ title: "RecommenedImprovements", field: "RecommenedImprovements", visible: false },
                    //{ title: "Communicatedto", field: "Communicatedto", visible: false },
                    //{ title: "Assurancesreceived", field: "Assurancesreceived", visible: false },
                    //{ title: "Organisationallearning", field: "Organisationallearning", visible: false },

                    { title: "MPI", field: "MPI" },
                    { title: "NHS Number", field: "NHSnumber" },
                    { title: "Surname", field: "surname" },
                    { title: "Forename", field: "patienfirsttname" },
                    { title: "DoB", field: "BirthDate", sorter: "date" },
                    {
                        title: "Discharge",
                        columns: [
                            { title: "Year/Month", field: "ymdisch" },
                            { title: "Day", field: "dischargeday" },
                            { title: "Ward", field: "dischargeward" },
                        ],
                    },
                    { title: "Directorate", field: "direc", headerFilter: "input" },
                    { title: "EPLOS", field: "eplos", align: "right" },
                    { title: "Doctor Foster Risk", field: "doctorfosterrisk", align: "right" },
                    { title: "Service Line", field: "sl", headerFilter: "input" },
                    {
                        title: "Admission",
                        columns: [
                            { title: "Date", field: "admissiondate", sorter: "date" },
                            { title: "Method", field: "admissionmethod", align: "right" },
                        ],
                    },
                    { title: "Date of Death", field: "DateOfDeath", sorter: "date", headerFilter: "input" },
                    { title: "Consultant", field: "consultant", headerFilter: "input" },
                ],
                rowDblClick: function (e, row) { },
            });

Can you see anything wrong with it? Tested on IE 11, latest Chrome (30 seconds), and latest Firefox (7 seconds - reasonable) via Visual Studio 2017 running IIS Express.

Paul

olifolkerd commented 6 years ago

Hey @NHSDevGuy

Looking at your code, you dont have a height set on your table so the Virtual DOM isnt being used, which means that Tabulator is trying to render all the rows on the table at once which could be slowing you down.

Try defining a height and see how you get on.

Cheers

Oli :)

olifolkerd commented 6 years ago

Also Try version 4.0 it is faster in a lot of areas :)

olifolkerd / tabulator

VERY slow loading of Ajax data (3.5) #1441