Jquery 实现不刷新分页功能

首先页面效果如下面URL：

http://www.movietownhaikou.com/test/zh-cn/tenants.php

HTML 循环显示所有的内容

                            <?php
                            $result = $tenants->tenantsdata();
                            while($data = mysql_fetch_array($result)):
                            ?>

                            <div class="tenants-block clearfix">
                                <div class="tenants-image">
                                    <img src="<?php echo IMAGE_FOLDER.\'/\'.$data[\'thumbnail\']; ?>">
                                </div>
                                <div class="tenants-info">
                                    <h4><?php echo $data[\'title\']; ?></h4>
                                    <span class="tenants-content">
                                        <?php echo $data[\'location\']; ?>

                                        <?php
                                        if(!empty($data[\'mapImage\'])):
                                        ?>

                                        <a href="<?php echo IMAGE_FOLDER.\'/\'.LANG.\'/\'.$data[\'mapImage\']; ?>" class="shop-icon-map"></a>

                                        <?php
                                        endif;
                                        ?>
                                    </span>
                                    <span class="tenants-content">
                                        <?php echo $data[\'content\']; ?>
                                    </span>
                                </div>
                            </div>

                            <?php
                            endwhile;
                            ?>

Jquery实现分页：

分页的整体思想就是加入有37个内容每页分6个那么就是判断37／6的值，如果有余数就加一的页面数

<script type="text/javascript">
$(document).ready(function(){
    var show_per_page = 6;
    //所有的内容的数量
    var number_of_items = $(\'.tenants-block\').size();
    var number_of_pages = Math.ceil(number_of_items/show_per_page);
    $(\'#current_page\').val(0);
    $(\'#show_per_page\').val(show_per_page);
    //需要拼接的按钮的html
    var navigation_html = \'\';

    var current_link = 0;
    //再每个选项下面拼接一个下划线
    $(\'.tenants-block\').append(\'<div class="dot-line"></div>\');
    while(number_of_pages > current_link){
        //从1这个按钮不点2按钮，直接点6按钮
        navigation_html += \'<a class="page-button" href="javascript:go_to_page(\' + current_link +\')" longdesc="\' + current_link +\'">\'+ (current_link + 1) +\'</a>\';
        current_link++;

    }
    //调用next()函数，和last函数（）
    navigation_html += \'<a class="arrow-button next" href="javascript:next();"></a>\';
    navigation_html += \'<a class="arrow-button last" href="javascript:last();"></a>\';
    $(\'.button-bar\').append(navigation_html);
    //$(\'.tenants-block\').after(\'<div class="dot-line"></div>\');
    $(\'.page-button:first\').addClass(\'active\');
    $(\'.tenants-block\').css(\'display\', \'none\');
    //$(\'.dot-line\').css(\'display\', \'none\');

    $(\'.tenants-block\').slice(0, show_per_page).css(\'display\', \'block\');
});


function next(){
    new_page = parseInt($(\'#current_page\').val()) + 1;
    //if there is an item after the current active link run the function
    var show_per_page = 6;
    var number_of_items = $(\'.tenants-block\').size();
    var number_of_pages = Math.ceil(number_of_items/show_per_page);
    if(new_page == number_of_pages)
    {
        $( ".arrow-button").unbind( "click" );
    }else{
        go_to_page(new_page);
    }


}
function last(){
    var show_per_page = 6;
    var number_of_items = $(\'.tenants-block\').size();
    var number_of_pages = Math.ceil(number_of_items/show_per_page);
    go_to_page(number_of_pages - 1);
}
function go_to_page(page_num){
    var show_per_page = parseInt($(\'#show_per_page\').val());
    //alert(show_per_page);
    start_from = page_num * show_per_page;
    end_on = start_from + show_per_page;

    $(\'.tenants-block\').css(\'display\', \'none\').slice(start_from, end_on).css(\'display\', \'block\');

    $(\'.page-button[longdesc=\' + page_num +\']\').addClass(\'active\').siblings(\'.active\').removeClass(\'active\');

    $(\'#current_page\').val(page_num);
}
</script>