CODEWITHSUNDEEP
javascripthtmlperformanceperformance-testing
user3027820
user3027820

Reputation: 27

loading big tables in HTML, what are other possibilities?

For a specific purpose, I need to show information of thousands of records in a tabular format all at once, Without the need to split it into less records and navigate through the pages (like gridview, etc.) you can see a sample of such a table here:

http://khi.ac.ir/EnglishW/info/Students/All_Students.aspx

The problem however is that the speed of loading such a table is not high. My question is how to improve this? What other techniques/technologies could be used for this?

Any help would be highly appreciated.

Upvotes: 0

Views: 1848

Answers (3)

Édouard Lopez
Édouard Lopez

Reputation: 43401

Approach

If your table is only a repetition of data with similar attributes, you can

  1. send the data using JSON ;
  2. render the table using a templating system such as handlebarsjs ;

Code

Assuming you have an array of arrays such as:

{
 myData: [
   ['row1', 'data', 'data'],
   ['row2', 'data', 'data'],
   ['row2', 'data', 'data'],
 ]
}

Template

Your HandlebarsJS template would look like:

<script id="entry-template" type="text/x-handlebars-template">
    <table>
    {{#each myData}}
      <tr>
        {{#each this}}<!-- row's data -->
          <td>{{ this }}</td>
        {{/each}}
      </tr>
    {{/each}}
    </table>
</script>

HTML

<head>
    <script>
        var mySource   = $("#entry-template").html();
        var myTpl = Handlebars.compile(mySource);
        var myJSON = {/* JSON above */};

        $(document.body).append (myTpl (myJSON)); // insert result to page
    </script>
</head>
<body>
    <!-- result should appears here -->
</body>

Upvotes: 0

John McNulty
John McNulty

Reputation: 293

I always find underscore templating to be performant with larger tables.

The template:

<script id="tmpl-students" type="text/template">

    <% for (var i = 0; i < students.length; i++) { %>
      <% var student = students[i]; %>
      <tr>
          <td><%= student.name %></td>
          <td><%= student.docType %></td>
          <td><%= student.field3 %></td>
          <td><%= student.field4 %></td>
      </tr>
    <% } %>
</script>

Then in your js file:

// grab the template
var tmpl = $('#tmpl-students').html();

// compile the template
var compiled = _.template(tmpl, { students : data });

// render the html
$('#yourDiv').html(compiled);

Take a look here: http://underscorejs.org/#template

Upvotes: 0

BBQ.
BBQ.

Reputation: 170

Without the need to split it into less records and navigate through the pages

Why don't you simply create an ajax request on scroll, so that only the visible records will be loaded when you first load the page, and load the other records while you scroll down?

For example: jscroll.com

Upvotes: 2

Related Questions