Client-Seite Paginierung

Will ich tun client-Seite Paginierung und verwendet das Jquery-Vorschlag, wie vorgeschlagen hier.
Es gibt einige Probleme mit diesem Skript.Eines der paging-Symbole kommen immer unten, egal was wir setzen die position auf dem pager div.Plus meine Tabelle hat einige Daten Größe inconsistenzies und damit möglicherweise ein unterschiedlicher Größe Seite an Seite.Deshalb ist die Tabelle Größe variiert drastisch, aber der pager fixiert bleibt casuing überlappen.Ich habe versucht div serperate aber keinen nutzen.Hier ist mein pager-code

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

Dies ist mein Jquery script

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

Meiner Tabelle id ist, dass thetable.

Will ich legen Sie die pager-code zu kommen, an der Spitze, so dass die Größe meiner Tabelle hat keinen Einfluss auf die Paginierung Symbole.

Sie könnten DataTables statt...es ist hochgradig anpassbar, und auch priovides die Anlage wie Suche, paginieren, und die Art und die Paginierung block, die position kann festgelegt werden, wo immer Sie wollen... aber Sie benötigen, Jquery, obwohl
Ich bin sehr neu in Jquery.Kein problem mit JQuery,können Sie ein Beispiel-code für die Implementierung der Paginierung nur mit der id, dass thetable mit DataTables

InformationsquelleAutor Harish | 2011-03-30

Sind viele Beispiele vorhanden, die auf DataTables können Sie download die Beispiele zusammen mit dem css und die javascripts, die erforderlich...

Es ist auch sehr leicht zu initialisieren ist hier ein Codebeispiel :

Fügen Sie die css-und js(erhältlich in der heruntergeladenen zip-Datei) erforderlich, an der Spitze

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

Die Tabelle mit den id', dass 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>

Nun Intialize datatables die folgenden:

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

Wird inialize datatable Witz null configs....

Einstellen position der Seitenumbrüche verwenden Sie die sDom Funktion

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

Beachten Sie die Buchstaben lfr, t,ip-Sie stehen für :

'l' - Länge ändern
'f' - Filter input
't' - Die Tabelle!
'ich' - Informationen
'p' - Paginierung
'r' - Verarbeitung

Nur die swap-Orte der Briefe und Holen Sie Sie, wo Sie möchten r/l durch p

genial you made my day danke.Ein Zweifel, wo Sie diese sDom-Funktion?Ist es js-code oder Html

InformationsquelleAutor Sangeet Menon

1

Ich würde empfehlen, mit Datatables . Befolgen Sie einfach die Dokumentation. Lassen Sie mich wissen, im Falle dass Sie Probleme haben. Sie brauchen nur zu rufen Sie die Bau-Funktion, um loszulegen
```
$(document).ready(function() {
$('#tableid').dataTable();
} );
```
Können Sie die Quelldateien herunterladen von hier

InformationsquelleAutor Piyush Mattoo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.