Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82387

Performance Improvements

$
0
0

I have a table with 12 columns and 3000 rows which is experiencing performance issues. It takes a full minute and a few seconds for DataTables to render the table (This is after the data is already returned to the screen, so I know the query and network are not issues). Due to business requirements I cannot use paging, therefore, DataTables is having to render all 3000 records. My JSP creates the HTML DOM table and then it is initialized like so:

$("#OrderHistoryTable2").dataTable({
            "paging":       false,
            "ordering":     true,
            "info":         true,
            "filter":       true,
            "length":       true,
            "processing":   true,
            "dom":          't<"bottom"if><"clear">',
            "scrollY":      "200px",
            "scrollX":      true,
            "columnDefs":   [
                { "orderData": [],    "targets": 0 }, //TURN OFF DEFAULT SORTING OF TABLE
                { "orderable": false, "targets": 0 }  //TURN OFF SORTABLILITY FOR COLUMN 1
            ],
            "language":     {
                "search": "filter:",
                "info": " _TOTAL_ items ",
                "infoEmpty": "0 items "
            }
});

I read that it would be faster if I used ajax instead of making DataTables convert the DOM. As a result, I have changed the JSP to only generate the <thead> section of the table. My initialization code now looks like this:

 $("#OrderHistoryTable2").dataTable({
            "paging":       false,
            "ordering":     true,
            "info":         true,
            "filter":       true,
            "length":       true,
            "processing":   true,
            "dom":          't<"bottom"if><"clear">',
            "scrollY":      "200px",
            "scrollX":      true,
            "columnDefs":   [
                { "orderData": [],    "targets": 0 }, //TURN OFF DEFAULT SORTING OF TABLE
                { "orderable": false, "targets": 0 }  //TURN OFF SORTABLILITY FOR COLUMN 1
            ],
            "language":     {
                "search": "filter:",
                "info": " _TOTAL_ items ",
                "infoEmpty": "0 items "
            },
            "ajax":         {
                "url":      "/app/getOrderHistoryData",
                "dataSrc":  "list",
                "type":     "GET"
            },
            "columns":      [
                {"data": "Column1"},
                {"data": "Column2"},
                {"data": "Column3"},
                {"data": "Column4"},
                {"data": "Column5"},
                {"data": "Column6"},
                {"data": "Column7"},
                {"data": "Column8"},
                {"data": "Column9"},
                {"data": "Column10"},
                {"data": "Column11"},
                {"data": "Column12"}
            ],
            "deferRender": true
        });

With these changes DataTables is now rendering the table in 16 seconds. This is much better than it was, but 16 seconds is still a long time to wait for a screen to render.

Is this the best I can hope for since I am not able to use paging or can I do more to improve the performance?


Viewing all articles
Browse latest Browse all 82387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>