0

I am facing issues while loading html data into the DOM. While the data is loading, it blocks the browser completely and the user needs to keep waiting till the entire data is loaded on the DOM and then the browser will display the data.

I am looking for a simultaneous loading and display of data instead of the long wait time to display the data. My code looks like below...

<div class="row">
    <div class="col s12" id="tabdata">
    </div>
</div>

<script>
            $.ajax({
            type: $('#testform').attr('method'),
            url: $('#testform').attr('action'),
            data: $('#testform').serialize(),
            success: function (response) {
                $('#tabdata').html(response)
</script>

The HTML response returned according to the above code is a table markup which will look like as below...

<table id="table_id" class="striped hoverable responsive-table centered">
<thead><tr><th>Cluster</th><th>vserver</th><th>policyname</th><th>ruleindex</th><th>protocol</th><th>clientmatch</th><th>rorule</th><th>rwrule</th><th>anon</th><th>superuser</th><th>allow-suid</th><th>allow-dev</th></tr></thead>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>1</td><td>nfs3</td><td>c22rphcorl.int.refinitiv.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>2</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>3</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>4</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
<tr><td>pl-cis-claa-p01</td><td>colooracle-p0043</td><td>AI205256_fnr_lab644d_7_n01oraarch1_nosnap</td><td>5</td><td>nfs3</td><td>c306nfn.int.thomsonreuters.com</td><td>sys</td><td>sys</td><td>65534</td><td>sys</td><td>true</td><td>true</td></tr>
..............
..............
......... (Around 20k rows)
</table>

This table markup can have around 20K rows... I have just mentioned a sample for the sake of simplicity..

It would be great if someone could suggest a way to display this data simultaneously while it is being loaded into DOM

Thanks in advance!!

Raj Raj
  • 1
  • 2
  • Loading *twenty thousand rows* implies that you may benefit from "paging" the data. Is there any reason why the user needs to see all of the data at once, vs. just seeing a subset of data with paging/sorting/filtering of some sort? – David Mar 18 '22 at 13:46
  • The users need to do analysis on the data. It is some reporting data. This will be linked to a data table with options to "export as excel", "print".. etc. Also, data table itself provides the pagination benefits showing 10 records per page... Here is the screenshot below.. – Raj Raj Mar 18 '22 at 13:51
  • You effectively have two options, client-side paging or server-side paging. With client-side paging, *all* data is sent to the client and the client-side UI manages paging/sorting/filtering. With server-side paging, the page/sort/filter options are sent to the server with each request and the server only returns the visible subset of data to the client. It's really up to you which one you want to use. If you use client-side paging and it takes a long time to load the data then you can provide a loading indicator to the user while that's being processed. – David Mar 18 '22 at 13:54
  • I there a way to simultaneously load as well as display data. I can manage with a table itself. Say, table data keeps on getting updated on browser as rows are being added to the table.. – Raj Raj Mar 18 '22 at 13:59
  • *Maybe.* It depends on how you're loading data and adding it to the DOM currently. Again, having a single screen with *twenty thousand rows* sounds excessive and unnecessary. Whether paging/sorting/filtering is done client-side or server-side (and I recommend server-side), at any given moment the user shouldn't be looking at all of that data. It's just unreasonably large for a web page. That's what downloadable reports/files are for. Only render on the UI a "page" of the data (20 records at a time, for example). – David Mar 18 '22 at 14:03
  • From comments, you're already doing paging (client-side paging) - change to server-side paging. For exporting, see [this answer](https://stackoverflow.com/a/41749924/2181514) and [this datatables faq](https://datatables.net/faqs/index#buttons) – freedomn-m Mar 18 '22 at 14:35
  • To answer your exact question (ignoring that datatables does this for you) - yes, but you need to request the data in batches (ie... paging). There's no concept of "streaming" HTML to a browser, *especially* a `` as every new row/cell to a `
    ` requires the browser to completely recalculate+redraw the entire table (there's ways to mitigate this). You could load the first page, display it, then load the rest - depending on how long it takes the *perceived* use will be much quicker - but again, just use datatables server-side paging.
     – freedomn-m Mar 18 '22 at 14:40

0 Answers0