Дизайн разбиения на страницы с использованием таблиц HTML и Ajax

Question

Каков наилучший подход к дизайну для отображения постраничных результатов в таблице HTML, динамически повторно заполненной с помощью запросов Ajax?

Я использую PHP, jQuery и Bootstrap, но это не имеет большого значения для этого вопроса. На данный момент я имею в виду следующую структуру, в качестве примера:

<table> 
    <thead> 
     <tr> 
      <th>Col1</th> 
      <th>Col2</th> 
      <th>Col3</th> 
     </tr> 
    </thead> 
    <tbody> 
    <!-- Populated by Ajax --> 
    </tbody> 
</table> 
<!-- Paginator HTML generated server-side --> 
<ul class="paginator"> 
    <li><a href="?p=1">First</a></li> 
    <li><a href="?p=1">Prev</a></li> 
    <li><a href="?p=1">1</a></li> 
    <li class="active"><a href="?p=2">2</a></li> 
    ... etc ... 
    <li><a href="?p=3">Next</a></li> 
    <li><a href="?p=20">Last</a></li> 
</ul> 

Это хорошо работает, но минусы этой конструкции является то, что мне нужно обновить Paginator ul следующим образом:

• Проверьте, если мне нужно первый/Prev/Next/последние элементы управление и прикрепить/отделить их (не может показать/скрыть здесь, потому что скругленные углы применяются к li:first-child a и li:last-child a в Bootstrap)
• Перемещение active класса к нужному элементу
• стороне сервера генерируется Paginator должна быть обновлена ​​на стороне клиента: возможность тиражирования кода

В качестве альтернативы можно поместить этот ul в разделе <tfoot></tfoot> в таблице. Это означает, что paginator обновляется на стороне сервера, что отлично и денди. Но тогда у меня есть следующие недостатки:

• Изменить запрос Ajax для возврата всех разделов три thead, tbody и tfoot, так как я должен был бы $.load() на table элемент, вместо tbody элемента.
• Переназначьте обработчик щелчка на Paginator ссылке, которые будут рассматриваться после того, как JavaScript $.load Инг (ссылки есть для прогрессивного улучшения)
• Возможного мерцания Paginator части

Что бы вы сделали?

Answer 1

В случае заполнения таблицы, я использую много JQuery DataTables плагин, он предлагает это комплексное решение Ajax с сортировки, поиска и нумерацией страниц:

http://www.datatables.net/ 

Он поставляется с начальной загрузки темы тоже.

Посмотрите на предметы AJAX и SERVER SIDE PROCESSING на своем сайте.