Paginierungs-Plugin

550
Quelle (EN)
Hailwood

Dieses Plugin ist in jQuery geschrieben und unterstützt das Codeigniter-Framework . Es ist ein Ajax-Tisch-Paginierungs-Plugin, das nur das bieten soll. Sie sollten mit diesem Plugin fast alle anderen Tabellenskripts verwenden können.

(function($){
    $.fn.extend({
        tpaginate: function(options) {

            //Settings list and the default values
            var defaults = {
                page: 0,
                url : null,
                rows: 20,
                nodata: 'The table is empty!',
                actions: true
            };

            var table;
            var foot;
            var body;
            var curpagespan;
            var totpagespan;
            var oldbody;
            var replaced = false;

            var options = $.extend(defaults, options);

            return this.each(function() {
                table = this;
                foot = $(table).find(' > tfoot > tr > td');
                body = $(table).find(' > tbody');
                create_footer(foot);
                curpagespan = foot.find(' > #table_pagecount > span#page');
                totpagespan = foot.find(' > #table_pagecount > span#page_total');
                curpagespan.html(0);
                totpagespan.html(0);
                $('#searchButton').click(function(){
                    var term = $('#search').val();
                    if(term.length >= 3){
                        if(replaced)
                            load_data(1, term, true, false);
                        else
                            load_data(1, term, true, true);
                    }
                });
                $('#search').keyup(function(){
                    if($(this).val() == ''){
                        create_tbody(false, false, true);
                    }
                });
            });

            function create_footer() {
                var pagecount = $('<div id="table_pagecount">Page <span id="page"></span> of <span id="page_total"></span></div>');
                var pager = $('<div id="table_pageination"><a class="link" id="first" style="display:none;">First</a><a class="link" id="prev" style="display:none;">Prev</a><span id="pages"></span><a class="link" id="next" style="display:none;">Next</a><a class="link" id="last" style="display:none;">Last</a></div>');
                foot.append(pagecount);
                foot.append(pager);
                load_data(1, '', true);
            }

            function current_page(page){
                curpagespan.html(page);
            }

            function total_page(page){
                totpagespan.html(Math.ceil(page/options.rows));
            }

            function load_data(page, search, action, save){
                if(save == null)
                    save = false;
                else
                    save = true;
                $('#table_pageination a.link').unbind('click');
                search = (search == null ? '' : search);
                var start = (page-1)*options.rows;
                if(page == 1)
                    start = 0;
                var url = options.url+'/'+start+'/'+action+'/'+search;
                $.ajax({
                    url: url,
                    success: function(data) {
                        if(data.total != 0){
                            current_page(page);
                            total_page(data.total);
                            create_tbody(data.members, save);
                            update_pages(page, Math.ceil(data.total/options.rows));
                        } else{
                            current_page(0);
                            total_page(0);
                            foot.find(' > #table_pageination > #pages').html('<a class="link">0</a>');
                            var newtr = $('<tr></tr>');
                            var newtd = $('<td style="font-weight:bold;text-align: center;"></td>').attr('colspan', foot.attr('colspan')).text(options.nodata);
                            body.html(newtr.append(newtd));
                        }
                    }
                });
            }

            function create_tbody(rows, save, revert){
                if(save == true){
                    oldbody = body.html();
                    replaced = true;
                }
                var newbody = $('<tbody />');
                if(revert == null){
                    for(var i in rows){
                        var row = $('<tr />');
                        for(var j in rows[i]){
                            if(j != 'id' && j != 'actions')
                                row.append('<td class="'+j+'td">'+(rows[i][j] == null ? '' : rows[i][j])+'</td>');
                            if(j == 'actions' && rows[i][j] != null && options.actions)
                                row.append(rows[i][j]);
                        }
                        newbody.append(row);
                    }
                } else{
                    newbody.html(oldbody);
                    replaced = false;
                }
                body.html(newbody.html());
                $(table).trigger("update");
            }

            function update_pages(page, total){
                foot.find(' > #table_pageination > #pages').html(ranger(page, 5, total));
                if(page == 1){
                    foot.find(' > #table_pageination > a#first').fadeOut('slow');
                    foot.find(' > #table_pageination > a#prev').fadeOut('slow');
                } else{
                    foot.find(' > #table_pageination > a#first').attr('rel', 1).fadeIn('slow');
                    if(page != 2)
                        foot.find(' > #table_pageination > a#prev').attr('rel', page-1).fadeIn('slow');
                }
                if(total != page){
                    foot.find(' > #table_pageination > a#last').attr('rel', total).fadeIn('slow');
                    if(total != page+1)
                        foot.find(' > #table_pageination > a#next').attr('rel', ++page).fadeIn('slow');
                } else{
                    foot.find(' > #table_pageination > a#last').attr('rel', total).fadeOut('slow');
                    foot.find(' > #table_pageination > a#next').attr('rel', total).fadeOut('slow');
                }

                $('#table_pageination a.link').click(function(){
                    replaced = false;
                    load_data($(this).attr('rel'), '', true);
                });
            }

            function ranger(num, range, max) {
                var left = num*1;
                var right = num*1;

                while (right - left < range * 2) {
                    if (right + 1 <= max)
                        right++;

                    if (left - 1 > 0)
                        left--;

                    if (right == max && left == 1)
                        break;
                }

                var str = '';
                for (var i = left; i <= right; i++) {
                    if(i != num)
                        str += '<a class="link" rel="'+i+'">'+i+'</a>';
                    if(i == num)
                        str += '<a rel="nolink">'+i+'</a>';
                }
                return str;
            }
        }
    });
})(jQuery);
Antworten
7
Ich habe jetzt keine Zeit, den Code genauer zu betrachten, kann aber einige offensichtliche Probleme aufzeigen. Wenn Sie den strengen Gleichheitsoperator (`===`) nicht verwenden, kann dies zu subtilen Fehlern führen. Die Verwendung von "hasOwnProperty" in einem "for in" ist keine gute Praxis. Beides zusammen führt zu Fehlern, wenn native Prototypen erweitert wurden (zB in create_tbody). Es könnte * auch * ein Durchsuchen der Schließungen der Event-Handler geben, aber ich bin mir nicht sicher, wie viel von einem Problem das sein würde, ohne weiter in den Code einzutauchen. Die Gesamtstruktur sieht gut aus, aber es konnten viele kleine Änderungen vorgenommen werden, die später etwas veröffentlichen sollten Ivo Wetzel vor 9 Jahren 2
Benutzer hassen die Paginierung. Sind Sie sicher, dass Sie nur 20 Elemente pro Seite anzeigen möchten? Erwägen Sie, mehr Elemente pro Seite anzuzeigen, z. B. 200. Nur ein Vorschlag. :) rightfold vor 9 Jahren 0
@Ivo Wetzel, Vielen Dank für Ihren Kommentar, ich hatte nicht einmal daran gedacht, den strengen Gleichheitsoperator zu verwenden. Aktualisiert die Codebase mit diesem Code. @Time Machine Die 20 Zeilen auf einmal können überschrieben werden, wenn Sie das Plugin mit `$ (table) .tpaginate ({Zeilen: 200}) aufrufen;` und ja, ich stimme zu, dass Benutzer die Paginierung hassen, also mit 60k Reihen, manchmal ist es notwendig! Hailwood vor 9 Jahren 1
Erwägen Sie die Verwendung von Klassen anstelle von IDs für die eingefügten HTML-Elemente. IDs sollten eindeutig sein, und da sie generische Namen haben (wie "# prev"), ist die Wahrscheinlichkeit eines unbeabsichtigten Konflikts mit bereits vorhandenem Markup hoch. VLS vor 6 Jahren 0

2 Antworten auf die Frage

3
MicTech

Das ist ein großer Code.

Ich empfehle dringend die Verwendung eines unteren Kamelgehäuses für Variablen.

Hier sind einige Hinweise von mir, nur Mikro-Refactoring.

if(term.length >= 3) {
  if(replaced)
    load_data(1, term, true, false);
  else
    load_data(1, term, true, true);
}

in:

if(term.length >= 3) {
  load_data(1, term, true, !replaced);                        
}

function load_data(page, search, action, save) {
   if(save == null)
     save = false;
   else
     save = true;
 ...

in:

function load_data(page, search, action, save) {
  save = save == null ? false : true;
...

for(var j in rows[i]) {
   if(j != 'id' && j != 'actions')
     row.append('<td class="'+j+'td">'+(rows[i][j] == null ? '' : rows[i][j])+'</td>');
   if(j == 'actions' && rows[i][j] != null && options.actions)
     row.append(rows[i][j]);
 }

in:

for(var j in rows[i]) {
  var rowsIJ = rows[i][j];

  if(j != 'id' && j != 'actions')
    row.append('<td class="'+j+'td">'+(rowsIJ == null ? '' : rowsIJ)+'</td>');
  if(j == 'actions' && rowsIJ != null && options.actions)
    row.append(rowsIJ);
}
Punkt eins und zwei stimme ich zu, sehe aber die Punkte von Nummer 3 nicht? Ich werde die vorgeschlagenen Änderungen für 1 und 2 vornehmen. Hailwood vor 9 Jahren 1
-1
vzwick

Soweit ich mich erinnere, wird die Verwendung von for… in Statements dringend empfohlen . Außerdem hat jQuery eine großartige $ .each () - Funktion .

Also das

for(var i in rows){
    var row = $('<tr />');
    for(var j in rows[i]){
        if(j != 'id' && j != 'actions')
            row.append('<td class="'+j+'td">'+(rows[i][j] == null ? '' : rows[i][j])+'</td>');
        if(j == 'actions' && rows[i][j] != null && options.actions)
            row.append(rows[i][j]);
    }
    newbody.append(row);
}

sollte eher etwas in der Richtung sein

$.each(rows, function(i,e){
    var row = $('<tr />');  
    $.each(rows[i], function(j,ee){
        if(j != 'id' && j != 'actions')
            row.append('<td class="'+j+'td">'+(rows[i][j] == null ? '' : rows[i][j])+'</td>');
        if(j == 'actions' && rows[i][j] != null && options.actions)
            row.append(rows[i][j]);
    });
    newbody.append(row);
});
Sie sollten alle Kommentare und Antworten sowie alle Links zu dieser Frage lesen, bevor Sie sie auf eine andere Frage beantworten. Sie müssen vollständig verstehen, was in beiden Fällen vor sich geht, um sicherzustellen, dass beide über dasselbe sprechen. Malachi vor 6 Jahren 1

Verwandte Probleme