ugrás a tartalomhoz

jQuery tablázat betöltése

simisoma · 2013. Dec. 9. (H), 22.12
Sziasztok,

tudtok valami jQuery pluginról, vagy ha van egy megoldás köszönettel venném az alábbi megoldásra:

van egy táblázatom:
<table>
      <tr>
            <td>1oszlop</td><td>1oszlop</td><td>1oszlop</td>
     </tr>
     <tr>
            <td>1oszlop</td><td>1oszlop</td><td>1oszlop</td>
     </tr>
     <tr>
            <td>1oszlop</td><td>1oszlop</td><td>1oszlop</td>
     </tr>
    <tr>
            <td>1oszlop</td><td>1oszlop</td><td>1oszlop</td>
     </tr>
     <tr>
            <td>1oszlop</td><td>1oszlop</td><td>1oszlop</td>
     </tr>
     <tr>
            <td>1oszlop</td><td>1oszlop</td><td>1oszlop</td>
     </tr>
</table>
<div><a href='#'>betölt</a></div>

A táblázat egy adatbázisból van lekérve így nem tudom a táblázat sorának a számát csak lekérdezés után.
Azt szeretném elérni hogy egyszerre csak az első négy sort töltse be, és amikor a betölt linkre kattint akkor megint +4 sort mutat (összesen már 8sor) megint rányom akkor 12 sor .... egésszen amíg van.
Lekérheti előrre mert nem olyan nagy lesz a sorok száma kb.30-40. De ez változhat :-)
jó lenne, ha valami efektet töltödne be.

Köszi a segítséget
‹ CSS3 font-size Google Analytics követőkód külön js-ben ›
 ■
1

AJAX

Poetro · 2013. Dec. 9. (H), 23.39
Ajánlom az AJAX tudományának elsajátítását, itt a Weblaboron is van róla cikk, de a jQuery dokumentációja és példái is kielégítőek lehetnek.
2

.each()

Pepita · 2013. Dec. 9. (H), 23.44
Simán a .each()-el végigmész a sorokon, egy külön változóban tárolod, hogy mennyinek kell lenni, mondjuk első lépésként $('table tr').css('visibylity', 'hidden'), aztán .each()-el és index-szel show() az első x-re, amit változóban tárolsz. Ezt a függvény futtatod onloadra és a linkre kattintásra. Linkre kattintáskor előbb emeled az X értékét.
3

adj a tr-eknek egy hidden

szabo.b.gabor · 2013. Dec. 10. (K), 14.33
adj a tr-eknek egy hidden class-t ami display:none - t állít be.

aztán 
$('a.meg-kell-elem').on('click',function(e){
	e.preventDefault();
	$('table.listazo tr.hidden:lt(4)').slideDown(250,function(){
		$(this).removeClass('hidden');
	});
});
tehát annyi, hogy click eseményre megkeresed a rejtett sorok közül az első négyet és megmutatod őket, és eltávolítod róluk a rejtett jelzést. nyilván ha már nincs rejtett sor, érdemes esetleg eltüntetni a több elem mutató linket.
4

adj a tr-eknek egy hidden

simisoma · 2013. Dec. 11. (Sze), 22.20
Köszi, szuperúl megy!

még egy kérdés, azt miként tudnám megoldani, hogy amikor a végére érek azaz az összes sor meg van jelenítve akkor az a tag már ne jelenjen meg?
5

a slideDown callback végére

szabo.b.gabor · 2013. Dec. 12. (Cs), 10.52
a slideDown callback végére tegyél be egy ilyent..
if($('table.listazo tr.hidden').length == 0){
    $('a.meg-kell-elem').addClass('hidden');
}
kb mennie kell sztem.
tehát ha nincs rejtett sor, akkor tüntesse el a linket..
6

Köszönet!

simisoma · 2013. Dec. 13. (P), 23.20
Köszönöm a segítséget, tökéletessen mennek a dolgok! KÖSZI!!!!!