Пагинация на стороне клиента - PullRequest
Новая
       16

Пагинация на стороне клиента

3 голосов
/ 30 марта 2011

Я хочу сделать нумерацию на стороне клиента и использовал предложение Jquery, как предложено здесь .Есть несколько проблем с использованием этого скрипта. Значки подкачки всегда располагаются внизу, независимо от того, какую позицию мы установили на div пейджера. Плюс моя таблица имеет некоторые несоответствия размера данных и, следовательно, может иметь разный размер страницы на страницу.размер таблицы резко меняется, но пейджер остается фиксированным, так как он перекрывается. Я пытался использовать div для serperate, но безрезультатно. Вот мой код пейджера 

<div id="pager" class="pager">
    <form>
        <img src="../addons/pager/icons/first.png" class="first"/>
        <img src="../addons/pager/icons/prev.png" class="prev"/>
        <input type="text" class="pagedisplay"/>
        <img src="../addons/pager/icons/next.png" class="next"/>
        <img src="../addons/pager/icons/last.png" class="last"/>
        <select class="pagesize">
            <option selected="selected"  value="10">10</option>

            <option value="20">20</option>
            <option value="30">30</option>
            <option  value="40">40</option>
        </select>
    </form>
  </div>

Это мой скрипт Jquery 

<script type="text/javascript">
    $(function() {
        $(theTable)
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
    });
    </script>

Мой идентификатор таблицы - таблица.

Я хочу разместить код пейджера сверху, чтобы размер моей таблицы не влиял на значки нумерации страниц.

Ответы [ 2 ]

3 голосов
/ 30 марта 2011

Есть множество примеров, доступных на DataTables , вы можете скачать примеров вместе с css и javascripts, необходимыми для этого ...

Также очень легко инициализировать вот пример кода:

Добавьте необходимые css и js (доступные в загруженном zip-файле) вверху 

<style type="text/css" title="currentStyle">
        @import "../../media/css/demo_page.css";
        @import "../../media/css/demo_table.css";
    </style>
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>

Таблица с идентификатором 'theTable' 

<table cellpadding="0" cellspacing="0" border="0" class="display" id="theTable">
<thead>
    <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
    </tr>
</thead>
<tbody>
    <tr class="odd gradeX">
        <td>Trident</td>
        <td>Internet
             Explorer 4.0</td>
        <td>Win 95+</td>
        <td class="center"> 4</td>
        <td class="center">X</td>
    </tr>

    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td class="center">1.8</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Gecko</td>
        <td>Firefox 3.0</td>
        <td>Win 2k+ / OSX.3+</td>
        <td class="center">1.9</td>
        <td class="center">A</td>
    </tr>
    <tr class="gradeA">
        <td>Misc</td>
        <td>NetFront 3.1</td>
        <td>Embedded devices</td>
        <td class="center">-</td>
        <td class="center">C</td>
    </tr>

</tbody>

Теперь инициализируйте таблицы данных следующим образом: 

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#theTable').dataTable();
        } );
</script>

Это будет инициализировать датированные конфиги с нулевыми конфигами ....

Чтобы установить положение нумерации страниц, используйте функцию sDom 

"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'

Обратите внимание на буквы lfr, t, ip, которые они обозначают:

'l' - изменение длины 'f' - фильтрация ввода 'т' - стол! 'я' - информация 'p' - нумерация страниц 'r' - обработка

Просто поменяйте местами эти буквы и возьмите их там, где хотите r / l на p

1 голос
/ 30 марта 2011

Я бы рекомендовал использовать Datatables . Просто следуйте документации. Дайте мне знать, если у вас возникнут проблемы. Вам просто нужно вызвать функцию построения, чтобы начать 

$(document).ready(function() {
$('#tableid').dataTable();
} );

Вы можете скачать исходные файлы с здесь

...