W określonym celu muszę pokazać informacje o tysiącach rekordów w formacie tabelarycznym, bez konieczności podzielenia go na mniej rekordy i poruszać się po stronach (jak Gridview itp.) Możesz zobaczyć próbkę takiego Stół tutaj:

http://khi.ac.ir/englishw/info/students/all_students.aspx.

Problemem jest jednak, że prędkość ładowania takiej tabeli nie jest wysoka. Moje pytanie brzmi, jak to poprawić? Jakie inne techniki / technologie można do tego wykorzystać?

Każda pomoc byłaby bardzo mile widziana.

0
user3027820 27 listopad 2013, 14:34

3 odpowiedzi

Najlepsza odpowiedź

Podejście

Jeśli twoja tabela jest tylko powtórzeniem danych o podobnych atrybutach, możesz

  1. Wyślij dane za pomocą JSON;
  2. Renderuj tabelę za pomocą systemu templating, taki jak handlebarsjs;

Kod

Zakładając, że masz macierz tablic takich jak:

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

Szablon

Twój szablon HandlebarsJS wyglądałby:

<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>
0
Community 23 maj 2017, 12:28

Bez potrzeby dzielenia go na mniej rekordy i poruszanie się po stronach

Dlaczego po prostu nie utworzysz żądania AJAX na przewijaniu, dzięki czemu tylko widoczne rekordy zostaną załadowane po pierwszym załadowaniu strony i załadujesz inne rekordy podczas przewijania?

Na przykład: jscroll.com

2
BBQ. 27 listopad 2013, 10:43

Zawsze znajduję podkreślenia podkreślenia, aby być występującym z większymi stołami.

Szablon:

<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>

Następnie w pliku js:

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

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

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

Spójrz tutaj: http://underscorejs.org/#tuplate

0
John McNulty 27 listopad 2013, 11:26