Разбивка на страницы в пунктирной форме и функция поиска с использованием php ajax jquery

Question

У меня есть следующий код, который создает пагинацию и получает результаты из php с помощью ajax.

$('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 для разбивки на страницы приветствуется. Спасибо