2013-02-27 2 views
3

Я ищу несколько советов от людей, которые сделали подобной раньше:DataTables - поджать первую страницу данных при полных наборах данных нагрузка

Я использую datatables.js, чтобы отобразить полную таблицу, которая составляет около 10 000 строк, и поэтому он медленно загружается (5-7 секунд) и дает «Скрипт не отвечает» popups - не очень хороший пользовательский интерфейс

Я хочу, чтобы полный набор данных для загрузки использовался для использования встроенного фильтра поиска как некоторые пользовательские фильтры, поэтому ajax захват данных о разбиении на страницы, фильтр и т. д. нежелателен. (Нам нравятся snappiness, и фильтрация может быть довольно интенсивной после загрузки данных)

Я сделал некоторые эксперименты & думают, что, возможно:

- загрузить первую страницу только несколько записей - - в то же время сделайте фоновый вызов ajax на загрузку страницы, чтобы построить вторую полную таблицу - наконец, когда данные там, замените inital table на ajax-построен один - довольно нужно перефразировать несколько вещей

Прежде чем тратить все время, которое потребуется на установку и проверку, кто-либо сделал это раньше или может предложить разные т предложений?

ТИА,

Джефф

+0

Я боюсь, DataTables не грузит с запрошенной функцией. основанный на моем опыте, когда есть большой набор данных (3000+), загрузка страницы будет довольно медленной. вы можете попробовать [серверная обработка] (http://datatables.net/release-datatables/examples/data_sources/server_side.html), которая много настраивает производительность. – yuwang

ответ

2

Как @yuwang говорит, это то, как работает DataTables. Мы тоже с этим сталкивались. Проблема заключается в том, что DataTables очень медленный при инициализации, и около 4000 записей, по-видимому, являются барьером в большинстве браузеров. В наших приложениях я просто установил ограничение на 4000 - представление DataTables в основном для удобства, и люди могут просто сделать более узкий поиск. Обработка серверов не является реальным решением.

Что касается «нагрузки первой страницы всего несколько записей - в то же время, сделать фоновую АЯКС вызова на странице загрузки, чтобы построить вторую полную таблицу», попробуйте следующее:

сервер. PHP, вызов с brief=yes, если только первые 100 записи должны быть загружены

<table id="test-table"> 
<thead> 
    <th>id</th> 
    <th>date</th> 
    <th>text</th> 
</thead> 
<tbody> 
<? 
function getColumn() { 
    $row='<tr>'; 
    $row.='<td>'.rand(1, 100000).'</td>'; 
    $row.='<td>'.date("Y-m-d H:i:s", mt_rand(1232055681, 1762855681)).'</td>'; 
    $row.='<td>'.str_shuffle('abcdefghijklmnopqr').'</td>'; 
    $row.='</tr>'; 
    return $row; 
} 
$count=(isset($_GET['brief'])) ? 100 : 10000; 
for ($i=0;$i<$count;$i++) { 
    echo getColumn(); 
} 
?> 
</tbody> 
</table> 

полностью рабочий пример (копирование и вставка)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 
<script> 
$(document).ready(function() { 
    $.ajax({ 
     url: 'server.php?brief=yes', 
     success : function(html) { 
      $('#table-container').html(html); 
      $("#test-table").DataTable(); 
      $.ajax({ 
       url: 'server.php', 
       success : function(html) { 
        $('#table-container').html(html); 
        $("#test-table").DataTable(); 
       } 
      }); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="table-container"></div> 
</body> 
</html> 

Конечно же, в server.php содержание записей всегда изменяется, что не будет иметь место при загрузке записей из базы данных (или любой другой)

Смежные вопросы