Question

我有以下代码创建分页并使用ajax从php获取结果。

$('document').ready(function() {
    $("#pagination a").trigger('click');
});

$('#pagination').on('click', 'a[href]', function(e) { // When click on a 'a' element of the pagination div
    var page = this.id; // Page number is the id of the 'a' element
    var pagination = ''; // Init pagination

    $('#articleArea').html('<span>loading...</span>'); // Display a processing icon
    var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
    // We set up the per_page var at 4. You may change to any number you need.

    $.ajax({ // jQuery Ajax
        type: 'POST',
        url: '../core/tuto-pagination.php', // URL to the PHP file which will insert new value in the database
        data: data, // We send the data string
        dataType: 'json', // Json format
        //timeout: 3000,
        success: function(data) {
            $('#articleArea').html(data.articleList); // We update the articleArea DIV with the article list

            // Pagination system
            if (page == 1) pagination += '<li class="active"><a>First</a></li><li class="active"><a><i class="fa fa-chevron-left"></i></a></li>';
            else pagination += '<li class=""><a href="#" id="1">First</a></li><li class=""><a href="#" id="' + (page - 1) + '"><i class="fa fa-chevron-left"></i></a></li>';

            for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
                if (i >= 1 && i <= data.numPage) {
                    pagination += '<li';
                    if (i == page) pagination += ' class="active"><span>' + i + '</span>';
                    else pagination += ' class=""><a href="#" id="' + i + '">' + i + '</a>';
                    pagination += '</li>';
                }
            }

            if (page == data.numPage) pagination += '<li class="active"><a><i class="fa fa-chevron-right"></i></a></li><li class="active"><a>Last</a></li>';
            else pagination += '<li class=""><a href="#" id="' + (parseInt(page) + 1) + '"><i class="fa fa-chevron-right"></i></a></li><li class=""><a href="#" id="' + data.numPage + '">Last</a></li>';

            $('#pagination').html(pagination); // We update the pagination DIV
        },
        error: function() {
        }
    });
    return false;
});

然后使用以下代码获取数据并在json中进行编码：

$numPage = ceil($numArticles[0] / $per_page); // Total number of page

// We build the article list
$articleList = '';
while( $result = $select->fetch() ) {
    $articleList .= '<div class="well well-sm">' . $result->id . '. <b>' . $result->username . '</b><p>' . $result->email . '</p></div>';
}

// We send back the total number of page and the article list
$dataBack = array('numPage' => $numPage, 'articleList' => $articleList);
$dataBack = json_encode($dataBack);

echo $dataBack;

问题？

现在真正的问题是，分页的创建格式为：

第一页上一页1 2 3 4 5 6 7 8 9 10 11 12 13 14 15下一页最后一页

但是我想要点状形式的东西（就像当今大多数网站使用的那样），以便所有页面都被覆盖而没有太多空间，并且单击下一页和上一页或进行页面更改时，点状形式会变成：

第一页上一页1 2 ... 15下一页末页

首页上一页5 6 ... 15下一页末页

首页上一页... 14 15下一页末页

我知道你知道这个主意。

我该如何实现搜索功能？

感谢您提供一个用于分页的优质jquery插件的想法。谢谢

虚线分页和使用php ajax jquery的搜索功能

0 个答案: