Работа с jQuery-плагином Tablesorter и tablesorter.pager. Создание настриваемых таблиц, отображаемых постронично.

Плагин Tablesorter служит для создания сортируемых таблиц. Рассмотрим как можно создать многостраничную таблицу с помощью tablesorter и tablesorter.pager.

1. Подключение плагина
   Подключаем необходимые библиотеки в заголовке страницы

<script type="text/javascript" src="путь/jquery.metadata.js"></script>

<script type="text/javascript" src="путь/jquery.tablesorter.js"></script>

<script type="text/javascript" src="путь /jquery.tablesorter.pager.js"></script>

2. Далее, создаем и заполняем нашу табличку для примера

<table id="#mytable" class="tablesorter">

    <thead>

       .....

    </thead>

    <tbody>

        .....

    </tbody>

</table>

Класс таблицы обязательно должен быть tablesorter.


3. Прикрепляем навигацию по записям, сразу после таблицы. 

За разбиение на страницы у нас будет отвечать слой pager.

<div id="pager" class="pager">
   <form> 
     <img src="./img/first.png" class="first"/>
     <img src="./img/prev.png" class="prev"/>
     <input type="text" class="pagedisplay"/>
     <img src="./img/next.png" class="next"/>
     <img src="./img/last.png" class="last"/>
     <select class="pagesize">
        <option selected="selected" value="5">5</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
     </select>
    </form> 
</div>  


По умолчанию, у нас будут выводиться только 5 строк таблицы.



3. Настраиваем нашу таблицу и компонент пагинации Pager.  


$("#mytable")
  .tablesorter({  widgets: ['zebra']})
.tablesorterPager({container: $("#pager"), positionFixed: false, size: 5});



Данный код прикрепляет плагин разбиения на страницы к нашей таблице. Также, size:5  указывает что при первом показе страницы нужно вывести только 5 строк, имеющихся в таблице. Данный момент почему до до сих пор не описан в документации в плагину pager.