Hướng Dẫn Phân Trang Cho Bài Viết Với jQuery – Blogspot

Hôm nay mình giới thiệu cho các bạn cách phân trang với jQuery. Với 1 trang nội dung tương đối dài thì việc phân nội dung thành các trang nhỏ thì sẽ hợp lý hơn, và trang nội dung trông sẽ gọn gàng hơn.

Demo trên Host : XEM
Demo trên blogspot : XEM
Ở đây mình chỉ post code của thủ thuật, các bạn có thể đọc hướng dẫn thêm ở trang demo trên blogspot.
Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sử code HTML
3. Chèn đọan code này vào trước dòng code </head> hoặc sau dòng code ]]></b:skin>

<script src='http://data.fandung.com/blog/demo/pro-gallery/js/jquery.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

    $(document).ready(function(){

    //how much items per page to show

    var show_per_page = 1;

    //getting the amount of elements inside content div

    var number_of_items = $('#content').children().size();

    //calculate the number of pages we are going to have

    var number_of_pages = Math.ceil(number_of_items/show_per_page);

    //set the value of our hidden input fields

    $('#current_page').val(0);

    $('#show_per_page').val(show_per_page);

    //now when we got all we need for the navigation let's make it '

    /*

    what are we going to have in the navigation?

        - link to previous page

        - links to specific pages

        - link to next page

    */

    var navigation_html = '<a href="javascript:previous();">«</a>';

    var current_link = 0;

    while (number_of_pages > current_link){

        navigation_html += '<a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';

        current_link++;

    }

    navigation_html += '<a href="javascript:next();">»</a>';

    $('#page_navigation').html(navigation_html);

    //add active_page class to the first page link

    $('#page_navigation .page_link:first').addClass('active_page');

    //hide all the elements inside content div

    $('#content').children().css('display', 'none');

    //and show the first n (show_per_page) elements

    $('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

    new_page = parseInt($('#current_page').val()) - 1;

    //if there is an item before the current active link run the function

    if($('.active_page').prev('.page_link').length==true){

        go_to_page(new_page);

    }

}

function next(){

    new_page = parseInt($('#current_page').val()) + 1;

    //if there is an item after the current active link run the function

    if($('.active_page').next('.page_link').length==true){

        go_to_page(new_page);

    }

}

function go_to_page(page_num){

    //get the number of items shown per page

    var show_per_page = parseInt($('#show_per_page').val());

    //get the element number where to start the slice from

    start_from = page_num * show_per_page;

    //get the element number where to end the slice

    end_on = start_from + show_per_page;

    //hide all children elements of content div, get specific items and show them

    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

    /*get the page link that has longdesc attribute of the current page and add active_page class to it

    and remove that class from previously active page link*/

    $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

    //update the current page input field

    $('#current_page').val(page_num);

}

//]]>

</script>

<style type='text/css'>

#page_navigation a{

    padding:3px;

    border:1px solid gray;

    margin:2px;

    color:black;

    text-decoration:none

}

#page_navigation a:hover{background:#ccc;}

.active_page{

    background:#555;

    color:red !important;

}

</style>

4. Save template.
5. Và đây là code của nội dung:

<input type='hidden' id='current_page' />

    <input type='hidden' id='show_per_page' />

<div id='content'>

        <p>N&#7897;i dung &#273;&#7885;an th&#7913; 1</p>

        <p>N&#7897;i dung &#273;&#7885;an th&#7913; 2</p>

        <p>N&#7897;i dung &#273;&#7885;an th&#7913; 3</p>

...

...

...

    </div>

    <div id='page_navigation'></div>

- Tùy theo việc hiển thị mà các bạn sử dụng đọan code ở bước 5 cho hợp lý, nếu muốn phân trang cho nội dung của widget thì dán code bước 5 vào widget đó.
Chúc các bạn thành công.

theo ethongtin