[Skrypt] Sorotwanie tabeli html Opcje

[slash^]

Proszę o podpowiedź co można zmienić w tym sortowaniu tabeli html aby je usprawnić:

https://jsfiddle.net/qlash/wk2zbepz/

[Beniooo]

Na pewno zmień kursor przy najechaniu na nagłówek tabeli, no i aby nie zaznaczało tekstu przy podwójnym kliknięciu

[SHiP]

Ogólnie spoko, ale kilka uwag, tak na szybko:

1. "use strict"
2. Wszystkie var na początek funkcji. To tam powinna się odbywać deklaracja zmiennych aby uniknąć problemów w skrajnych przypadkach.
3. Skoro przekazujesz w parametrze obiekt jQuery to nie do końca wiem po co wszędzie $(table) nie lepiej nazwać parametr $table i wszędzie używać $table zamiast $(table) ?
4. Zamiast wrzucać do struktury DOM nowe elementy zawsze lepiej jest dodać/usunąć klasę i ewentualnie te elementy ugrać za pomocą :before/:after. W Twoim wypadku klasa w zupełności wystarczy :-). [dotyczy strzałek w nagłówkach]
5. Szczególnie w pętlach warto taki kod:

$(v).find('td:eq('+col+')').html();

Zamienić na:

// przed pętlą:
$cells = $(v).find('td');

// i w pętli jedynie:
$cells.eq(col).html();

Ten post edytował SHiP 25.04.2016, 09:33:10

[Comandeer]

a11y i UX:
Klikalne nagłówki powinny albo mieć w sobie przyciski, albo zachowywać się jak przyciski → https://www.paciellogroup.com/blog/2016/04/...ment-semantics/ – dzięki temu całą tabelkę będzie dało się obsłużyć przy pomocy klawiatury, co jest podstawowym wymogiem dostępności
Kod:
Powinieneś to zamknąć w kodzie plugina jQuery.

Kod

$(this).parent().parent().parent()

jQuery ma $.fn.parents, które pozwala uniknąć takich potworów w kodzie. Co więcej: dobrze zrobione event delegation też ten problem rozwiązuje – wystarczy przypiąć kliki na tabelę i sprawdzać, czy przypadkiem nie klikamy w th.sortable.

Cache'uj zapytania do DOM, bo one są jednak kosztowne.

Zamiast bawić się w dostawianie ikonki i jej usuwanie, rozważylbym zmienianie stanu elementu (czyli $.fn.toggleClass).

[slash^]

Dzięki za podpowiedzi. Mam kilka pytań:

@SHiP
Ad 3: Rozumiem, że jquery ma jakiś mechanizm, że jak w nazwe funkcji dałem zamiast table $table to faktycznie mogę tak używać (zamisat $(table)) ?
Ad 5: Przed pętlą nie mam wartości $(v) ... Możesz podać przykład jakby to miało działać?

@Comandeer
Dzięki za sugestię z parents, w ten sposób rozumiem, że jest już ok:
$(this).parent().parent().parent() ---> $(this).parents().find('table')

Co do dostawiania/zmiany ikonki, dzięki takiej opcji jak teraz pominąłem wymóg wstawiania do tabeli tej ikonki "od razu" w templatce html.
Plugin jquery, tak próbowałem ale jeszcze nie do końca ogarniam, Czy jest możliwość aby raz na początku skryptu "uruchomić" plugin tak aby działał do później dodanych elementów na stronie, czy po update html trzeba jeszce raz wywołać $el.plugin() ?

[Comandeer]

Raczej

Kod

$( this ).parents( 'table' )

Co do plugina: jeśli zrobisz event delegation, np.

Kod

$( 'body' ).on( 'click', selektorPodanyDoPluginu

to powinno działać.

[SHiP]

1. Mój błąd. Rzeczywiście v nie ma przed pętlą. :-). Co więcej masz obj który robi to o czym pisałem. Jest ok.
2. To jest tylko konwencja nazewnicza używana w niektórych kręgach jQuerowców :-). Dzięki $ na początku nazwy zmiennej wiadomo od razu, że to obiekt jQuery i możemy wykonywać na nim wszystkie operacje typowe dla jQuery. A zmienną się wprowadza po to aby ograniczyć użycie $() bo to bardzo czasochłonna funkcja.

Zamiast

[PHP] pobierz, plaintext 
$('.counter').cos();
$('.counter').cos2();
$('.counter').cos3();
[PHP] pobierz, plaintext 

bardzo często można spotkać:

[PHP] pobierz, plaintext 
$counter = $('.counter');
[PHP] pobierz, plaintext 

i potem:

[PHP] pobierz, plaintext 
$counter.cos();
$counter.cos2();
$counter.cos3();
[PHP] pobierz, plaintext 

Jeżeli później w kodzie ktoś zobaczy $counter to nie zastanawia się czy to integer, jakiś iterator, czy coś innego, bo widać od razu, że to obiekt jQuery. U Ciebie jest zastosowana inna sztuczka tj. za każdym razem używasz funkcji $(), ale jest to rozwiązanie moim zdaniem nieeleganckie.

[PHP] pobierz, plaintext 
var column = $(table).find('thead th:eq(' +col+ ')');
var sortBy = $(column).attr('data-sort') || 'length';
[PHP] pobierz, plaintext 

można byłoby wymienić na:

[PHP] pobierz, plaintext 
var column = $(table).find('thead th:eq(' +col+ ')');
var sortBy = column.attr('data-sort') || 'length';
[PHP] pobierz, plaintext 

lub wg. konwencji nazewniczej, o której piszę:

[PHP] pobierz, plaintext 
var $column = $(table).find('thead th:eq(' +col+ ')');
var sortBy = $column.attr('data-sort') || 'length';
[PHP] pobierz, plaintext 

Ten post edytował SHiP 27.04.2016, 09:11:20

[Pyton_000]

Lub zamiast:

Kod

$('.counter').cos();
$('.counter').cos2();
$('.counter').cos3();

tak

Kod

$('.counter')
        .cos()
        .cos2()
        .cos3();

[slash^]

Dzięki za odpowiedzi.

@Comandeer
Metodę z on() znam, dzięki. Chodzi mi o jakąś metodę której mogłbym uzyć raz np, na początku, któraby wykrywała dodanie elementu z odpowiednim znacznikiem i wywoływała odpowiedni event/metodę.

[Comandeer]

Mutation Observers? Hack z animationstart → https://davidwalsh.name/detect-node-insertion ?

[LowiczakPL]

Aby usprawnić kod to

parenty dałbym w funkcji sortTable aby został taki kod wywołania,

sortTable( $(this), 'thead th');

dopiero w sortable parentujesz aż znajdziesz szczyt tabeli ale nie na sztywno a rekurencyjnie

bo co w przypadku kiedy ktoś nie da <thead> albo sortowanie będzie wywoływane nie na nagłówku a po kliknięciu w zawartego w nim DIVa.

Dzięki temu funkcja staje się bardziej uniwersalna.