Forum PHP.pl > [jQuery]Sortowanie tabeli względem jednego wiersza.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [jQuery]Sortowanie tabeli względem jednego wiersza.

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

S_Olewniczak

6.07.2009, 09:31:21

Napisałem prosty kod do sortowania tabeli względem jednego wiersza, którego indeks znamy. Wygląda on tak:

Kod

//now sort table
if(sort_td_index!=undefined) {
     $(table + ' tr:gt(1)').each(function() {
        act_tr_1 = this;
        act_td_1 = $('td:eq(' + sort_td_index + ')' ,this).html().toLowerCase();
        $(table + ' tr:gt(1)').each(function() {
            act_td_2 = $('td:eq(' + sort_td_index + ')' ,this).html().toLowerCase();
            if ((act_td_2 > act_td_1 && sort_opt=='asc') || (act_td_2 < act_td_1 && sort_opt=='desc')) {
                $(act_tr_1).insertBefore(this);
            }
        });

     });
}//end if

Jednak nie działa jak należy. Co robię źle?

vokiel

6.07.2009, 13:40:54

1. czy table jest zmienną? Na co wskazuje?
2. console.log() => debugowanie:) (podgląd w firebugu)
3. zobacz jeśli this zastąpisz $(this)
4. skąd się bierze sort_td_index?

[PHP] pobierz, plaintext 
<?php
if(sort_td_index!=undefined) {
// jesli table ma się donosić do tabeli to wrzuć w apostrofy $('table tr:gt(1)')
     $(table + ' tr:gt(1)').each(function() {
        act_tr_1 = $(this);
        act_td_1 = $('td:eq(' + sort_td_index + ')' ,$(this)).html().toLowerCase();
console.log(act_td_1); //debugowanie ;)
        $(table + ' tr:gt(1)').each(function() {
            act_td_2 = $('td:eq(' + sort_td_index + ')' ,$(this)).html().toLowerCase();
            if ((act_td_2 > act_td_1 && sort_opt=='asc') || (act_td_2 < act_td_1 && sort_opt=='desc')) {
                act_tr_1.insertBefore($(this));
            }
        });
     });
}
?>
[PHP] pobierz, plaintext

btw. a czy sortowanie nie powinno być względem kolumny?

S_Olewniczak

6.07.2009, 20:19:36

Przepraszam, oczywiście chodziło mi o sortowanie względem kolumny. table jest zwykłym stringiem('#id_tabeli'). sort_td_index, jest indeksem kolumny wg której sortuje tabele.

vokiel

6.07.2009, 22:21:11

Teraz pozostaje zestaw pytań zastadniczych: Co nie działa? Jak działa?
Propomuję wczytać całą zawartość tabeli do zmiennej

Kod

var $rows = $(table).find('tbody tr').get();

i posortować ją przy użyciu funkcji sort z czystego js. A następnie całą zawartość wpisać spowrotem do tabeli. Przydatnym byłoby oddzielenie nagłówka tabeli poprzez thead od tbody - wtedy nie trzeba posiłkować się ' tr:gt(1)'.

S_Olewniczak

7.07.2009, 10:18:15

Próbowałem napisać ten kod według twoich wskazówek, ale nic mi nie wyszło. Proszę podaj mi w jaki sposób posortować tą tablicę i wstawić ją z powrotem do tabeli w HTML.

vokiel

7.07.2009, 11:38:43

[PHP] pobierz, plaintext 
<?php
var rows = $(table).find('tbody tr').get();
rows.sort(function(a, b) {
    var keyA = $(a).children('td').eq(sort_td_index ).text().toUpperCase();
    var keyB = $(b).children('td').eq(sort_td_index ).text().toUpperCase();
    if (keyA < keyB) return -1;
    if (keyA > keyB) return 1;
    return 0;
});
$.each(rows, function(index, row) {
    $(table).children('tbody').append(row);
});
?>
[PHP] pobierz, plaintext

Ewentualnie jakiś plugin: tablesorter

S_Olewniczak

7.07.2009, 12:04:46

Działa! Po trzech dniach walki. Tu trochę poprawiony kod, poprawnie sortujący liczby. Może się komuś przyda.

Kod

/*
  * Natural Sort algorithm for Javascript
  *  Version 0.2
  * Author: Jim Palmer (based on chunking idea from Dave Koelle)
  * Released under MIT license.
  */
function naturalSort (a, b) {
         // setup temp-scope variables for comparison evauluation
         var x = a.toString().toLowerCase() || '', y = b.toString().toLowerCase() || '',
                 nC = String.fromCharCode(0),
                 xN = x.replace(/([-]{0,1}[0-9.]{1,})/g, nC + '$1' + nC).split(nC),
                 yN = y.replace(/([-]{0,1}[0-9.]{1,})/g, nC + '$1' + nC).split(nC),
                 xD = (new Date(x)).getTime(), yD = (new Date(y)).getTime();
         // natural sorting of dates
         if ( xD && yD && xD < yD )
                 return -1;
         else if ( xD && yD && xD > yD )
                 return 1;
         // natural sorting through split numeric strings and default strings
         for ( var cLoc=0, numS = Math.max( xN.length, yN.length ); cLoc < numS; cLoc++ )
                 if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) < ( parseFloat( yN[cLoc] ) || yN[cLoc] ) )
                         return -1;
                 else if ( ( parseFloat( xN[cLoc] ) || xN[cLoc] ) > ( parseFloat( yN[cLoc] ) || yN[cLoc] ) )
                         return 1;
         return 0;
}
finction sortTable(sort_td_index, table='#id_of_table') {
var rows = $(table).find('tbody tr').get();
rows.sort(function(a, b) {
    var keyA = $(a).children('td').eq(sort_td_index ).text();
    var keyB = $(b).children('td').eq(sort_td_index ).text();
return naturalSort(keyA, keyB);

});
$.each(rows, function(index, row) {
   $(table).children('tbody').append(row);
});
}

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.