Forum PHP.pl > jQuery DataTables - jak dostac index tr ?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: jQuery DataTables - jak dostac index tr ?

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

Sadamowski

13.06.2012, 14:02:51

Wiatm,

Pytanie jest proste:
jak dostac index <tr> wygenerowany przez datatables.
Oczywiście odpowiedz jest prosta (każdy z Was powie):

[PHP] pobierz, plaintext 
var aPos = oTable.fnGetPosition.parent(this);
[PHP] pobierz, plaintext

to oczywiscie dziala wysmienicie jesli mamy zadeklarowane cos takiego: (oczywiscie zakladamy ze oTables jest juz zadeklarowane wczesniej jako $.dataTables();

[PHP] pobierz, plaintext 
$('#PendingEmpl_table').on('click', 'tbody tr', function(){
 
        var aPos = oTable.fnGetPosition(this);
        alert(aPos);
}
[PHP] pobierz, plaintext

itd

ale jesli chce dostac to samo ale klikajac na konkretny element w rzędzie tabeli np: <td> <a class='rem_tr'> Remove </a> </td> itd

to mam coś takiego

[PHP] pobierz, plaintext 
$('#PendingEmpl_table').on('click', 'tbody tr .rem_tr', function(){
 
        var aPos = oTable.fnGetPosition(?);
        alert(aPos);
}
[PHP] pobierz, plaintext

co wstawic w te znaki zapytania - this oczywiscie odpada. Kombinowalem z parentami i za cholere nic , POMOCY!!

kamil4u

13.06.2012, 15:20:41

Pomógłbym Ci, ale nie znam funkcji: oTable.fnGetPosition ,dlatego mogę tylko strzelać:

Kod

var aPos = oTable.fnGetPosition( $(this).parent() );

Jeżeli nie to opisz po krótko co to robi i jaką masz strukturę HTML-u.

Cytat

Oczywiście odpowiedz jest prosta (każdy z Was powie):
var aPos = oTable.fnGetPosition.parent(this);

Nie wiem dokładni czym jest fnGetPosition, ale jeśli to funkcja, która nic ciekawego nie zwraca( obiektu jQuery dokładnie) to wywali Ci błąd

Sadamowski

13.06.2012, 17:12:10

hejka,

nie nie,

[PHP] pobierz, plaintext 
var aPos = oTable.fnGetPosition.parent(this);
[PHP] pobierz, plaintext

dziala bez zarzutu, zreszta jest to rozwiazanie z przykładów ze strony developerów datatables

a jezeli chodzi o strukture htmlu to mam po prostu tabele z rzadkami:

[HTML] pobierz, plaintext 
<tr> <td> Costam</td> <td> costam innego </td> <td> <a href=# class=''rem_tr"> usun </a></td> </tr>
[HTML] pobierz, plaintext

czyli chodzi zeby po kliknieciu na <a> dostać zwrot indeksu tabeli dataTables.

kamil4u

13.06.2012, 22:31:38

Nadal nie wiem o co chodzi, ale znalazłem rozwiązanie

Byłem blisko:

Cytat

var aPos = oTable.fnGetPosition( $(this).parent() );

To nie działa, gdyż funkcja oczekuje referencji do elementu DOM( elementu HTML ), a $(this).parent() zwraca obiekt jQuery, a nie HTML. Czyli trzeb jeszcze użyć funkcji get( http://api.jquery.com/get/ )

Czyli kod będzie wyglądał mniej więcej tak:

Kod

var aPos = oTable.fnGetPosition( $(this).parent().parent().get(0) );

Jest użyte 2 razy parent, gdyż masz strukturę tr->td->a ,a Ty wychodzisz od <a>. Nie chce mi się sprawdzać( patrz dokumentacja jQuery ), ale chyba można zastąpić
parent().parent() na ładniejsze parent(2)

Jakby coś nadal nie działało, to zanim napiszesz to trochę potestuj to rozwiązania, a jak to nie pomoże to umieść przykładowy kod tu: http://jsfiddle.net/ - możesz tam dołączyć biblioteki jQuery

Sadamowski

14.06.2012, 07:59:48

kamil4u, dzieki za odpowiedz

rozwiazanie niestety nie dziala, ale jakos jeszcze pokombinuje
chetnie puscilbym to jfidlu ale niestety nie mozna tam dolaczyc biblioteki dataTable

ale chwile później ( yerba-mate pomaga na mózg szczególnie z rana) pomyslałem po jakiego diabła mi ta kijowa funkcja
napisze sobie własną (nie koniecznei funkcje ale taka mala procedurke), no i napisałem:

var rowIndex = $(this).closest('tr').prevAll().length;
albo
var rowIndex = $(this).parent().parent().index();

do wyboru do koloru

no i działa,

jeszce raz kamilowi4u dzieki za odzew

milego dnia

k_@_m_i_l

14.06.2012, 10:10:05

Zamiast parent().parent() możesz użyć parents("tr") i też Ci zwróci to samo. A w przypadku zmiany struktury (dojdzie jakiś dodatkowy div itd), parent().parent() może przestać działać. Z parents("tr") nie powinno być problemu.

kamil4u

14.06.2012, 12:14:53

Jesteś na 100% pewien, że nie działa? Bo zanim napisałem robiłem proste testy:

1. http://datatables.net/api#fnGetPosition
2. klikam "Run in JS Bin"
3. Patrzę jak działa skrypt: jak klikam na td to zmienia się jego treść:

Kod

   $(document).ready(function() {
   $(document).ready(function() {
     $('#example tbody td').click( function () {
       // Get the position of the current data from the node
       var aPos = oTable.fnGetPosition( this );

       // Get the data array for this row
       var aData = oTable.fnGetData( aPos[0] );

       // Update the data array and return the value
       aData[ aPos[1] ] = 'clicked';
       this.innerHTML = 'clicked';
     } );

     // Init DataTables
     oTable = $('#example').dataTable();
   } );
   } );

4. Usuwam większość kodu( jak kilkam wyświetla mi alert-a, a nawet 2 ):

Kod

   $(document).ready(function() {
     $('#example tbody td').click( function () {
       alert( this );
       var aPos = oTable.fnGetPosition( this );
       alert( aPos );
     } );

     // Init DataTables
     oTable = $('#example').dataTable();
   } );

5. Dodaję mój kod z poprzedniego posta:

Kod

   $(document).ready(function() {
     $('#example tbody td').click( function () {
       alert( $(this).parent("tr").get(0) );
       var aPos = oTable.fnGetPosition( $(this).parent("tr").get(0) );
       alert( aPos );
     } );

     // Init DataTables
     oTable = $('#example').dataTable();
   } );

I jak klikam uzyskuję numer klikniętego tr. On jest tam w okolicach 6 na pierwszym <tr>, bo tak jest skonstruowana na tabela - zobacz przez firebug-a

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.