Behavior question: Display all rows then shrink to 10 rows

Behavior question: Display all rows then shrink to 10 rows

jb48888jb48888 Posts: 9Questions: 2Answers: 0

Hi,

I'm using a loop to generate HTML code. I have found the table display all rows first then reformat itself to the default number of rows (10). Is this normal behavior? Is there any trick to avoid display all rows first? I understand that using ajax call can achieve that. However, dynamic HTML generation might be easier for me to manipulate HTML code.

The following is sample code to generate HTML code (ASP.Net MVC):

@foreach (var v in Model)
{
<tr>
<td>
@Html.DisplayFor(x => v.Column1)
</td>
<td>
@Html.DisplayFor(x => v.Column2)
</td>
</tr>
}

Thanks.

jb48888

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yes this is expected. Presumably you have your DataTable initialisation in a $(document).ready() event handler, so the HTML needs to be fully loaded before the Javascript can run.

    Depending on a number of factors, browsers might try to render the HTML before the Javascript runs. As such there isn't really anything DataTables can do about it. Its know as a FOUC (Flash of Unstyled Content).

    The only way around it is to use Ajax as your table's data source.

    Allan

  • jb48888jb48888 Posts: 9Questions: 2Answers: 0

    Thanks Allan. I'll try to use Ajax data source and figure out how to manipulate dynamic components, for example adding an ID to a cell and update the cell text from Javascript. My main concern is the performance since the table may display up to five thousand rows. Now it take about 5 seconds to display the data, which is acceptable. Don't know if rendering the table with Ajax data source is slower or not.

    jb48888

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    for example adding an ID to a cell

    columns.createdCell.

    update the cell text from Javascript

    cell().data() after initialisation if you need to.

    Now it take about 5 seconds to display the data, which is acceptable. Don't know if rendering the table with Ajax data source is slower or not.

    It should actually be faster. If you enable the deferRender option it means the DOM draw will only create the nodes when they are needed, rather than all at page load. It will still need to download the data from the server, but that will be the limiting factor I think. Make sure you have gzip enabled on the server, as JSON data can often be highly compressed.

    Regards,
    Allan

  • jb48888jb48888 Posts: 9Questions: 2Answers: 0

    Hi Allan, Thanks for great suggestions.

    jb48888

This discussion has been closed.