Membuat Paging Loading More Dengan Kode Html, Jquery Dan Css

16 Jun 2016 05:45 • Post By

Membuat Paging Loading More Dengan Kode Html, Jquery Dan Css

Mungkin kamu semua pernah melihat penerapan teknik loading pada paging atau pagination yang menggunakan Ajax di Facebook, Twitter atau situs lain top lain. Alih-alih untuk tidak ingin menunjukkan link pagination mereka, mengapa tidak membiarkan pengguna memuat data dinamis pada klik tombol. Dalam artikel ini kita akan mencoba untuk mengadopsi teknik ini untuk membuat loading halaman yang sama untuk proyek web menggunakan jQuery.

Caranya pun cukup dibilang simple dan kamu semua bisa mempraktekannya sendiri karena hanya memakai kode HTML, CSS, JQUERY saja untuk membuatnya.

Maka dari itu di simak baik-baik caa membuatnya seperti berikut ini :

1. Buat sebuah file HTML seperti berikut.
Kemudian isi pada file dengan script dibawah ini bertujuan untuk menampilkan content paging.

<ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty one</li>
    <li>Twenty two</li>
    <li>Twenty three</li>
    <li>Twenty four</li>
    <li>Twenty five</li>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
2. Buat file JAVASCRIPT
File javascript ini untuk mengisi script jquery yang bertujuan untuk melengkapi load pada paging yang di short oleh css.

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});
3. Buat file CSS
Pada file css dibutuhkan untuk melengkapi isi data jquery.

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}
Dan yang sudah jadi udah aku buatin demonya bisa kamu lihat disini.

Nah sekian dari saya tentang Membuat Paging Loading More Dengan Kode Html, Jquery Dan Css semoga artikel ini meski simple sedikit aku yakin kamu bisa memahaminya semua dan jika ada yang ditanyakan silahkan berkomentar.

Jangan lupa Subscribe ya !!

Membuat Paging Loading More Dengan Kode Html, Jquery Dan Css | Tutorialku.Net | 4.5