إنشاء أرقام الصفحات باستخدام JavaScript/jQuery؟

Question

كيفية إنشاء أرقام الصفحات مثل أدناه باستخدام JavaScript/jQuery؟

إذا تم تحديد الصفحة الخامسة ، فيجب علي إظهار 3،4 و 6،7 وأيضًا 1 ، الصفحة الأخيرة مع Prev ، التالي ... أي اقتراح ....

تعديل:

كيف تعمل مع بيانات JSON التي تستخدم هذه الصفحات DIV؟ (أي) تحتوي بيانات JSON الخاصة بي على 50 سجلًا أريد 10 في الصفحة 1 وما إلى ذلك ... كيفية تراجع بيانات JSON بهذه الأرقام ...

أريد أن تمر وظيفة jQuery currentpageno,lastpagenumber ويجب أن تقوم الوظيفة بإنشاء أرقام صفحات مثل ما يلي بالنسبة لي

إذا كانت الصفحة الأولى

إذا كان في الوسط ،

إذا كانت الصفحة الأخيرة ،

التحرير الثاني:

لقد جربت هذه الوظيفة ولكن لا يبدو أنها حصلت على النتيجة المرجوة

function generatePages(currentPage, LastPage) {
    if (LastPage <= 5) {
        var pages = '';
        for(var i=1;i<=5;i++)
        {
            pages += "<a class='page-numbers' href='#'>" + i + "</a>"
        }
        $("#PagerDiv").append(pages);
    }
    if (LastPage > 5) {
        var pages = '';
        for (var i = 1; i <= 5; i++) {
            pages += "<a class='page-numbers' href='#'>" + i + "</a>"
        }
        $("#PagerDiv").append(pages);
    }
}

لدي lastPage و currentPage القيم الرجاء مساعدتي في الحصول على هذا ...

Answer 1

ما تبحث عنه يسمى "ترقيم الصفحات" وهناك (كما هو الحال دائمًا) مكون إضافي jQuery يقوم بالمهمة لك:

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

(تنزيله هنا)

---

تعديل: نظرًا لأنك لا يبدو أنك قادر على تشغيلها ، فإليك طريقة واحدة (من عدة مختلف) كيف يمكنك استخدام المكون الإضافي.

الخطوة 1: قم بتوليد علامة من JSON-data مثل ما يلي:

<div id="display">
    <!-- This is the div where the visible page will be displayed -->
</div>

<div id="hiddenData">
    <!-- This is the div where you output your records -->
    <div class="record">
        <!-- create one record-div for each record you have in your JSON data -->
    </div>
    <div class="record">
    </div>
</div>

تتمثل الفكرة في نسخ السجل المعني إلى Display Div عند النقر فوق رابط الصفحة. لذلك ، يوفر المكون الإضافي وظيفة استدعاء الصفحات. الخطوة 2 هو تنفيذ هذه الوظيفة ، على سبيل المثال:

function pageselectCallback(pageIndex, jq){
    // Clone the record that should be displayed
    var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
    // Update the display container
    $('#display').empty().append(newContent);
    return false;
}

هذا يعني أن لديك صفحة واحدة لكل سجل. إذا كنت ترغب في عرض سجلات متعددة لكل صفحة ، فيجب عليك تعديل الوظيفة أعلاه وفقًا لذلك.

الخطوة الثالثة والأخيرة هو تهيئة كل شيء بشكل صحيح.

function initPagination() {
    // Hide the records... they shouldn't be displayed
    $("#hiddenData").css("display", "none");
    // Get the number of records
    var numEntries = $('#hiddenData div.result').length;
    // Create pagination element
    $("#pagination").pagination(numEntries, {
        num_edge_entries: 2,
        num_display_entries: 8, // number of page links displayed 
        callback: pageselectCallback,
        items_per_page: 1  // Adjust this value if you change the callback!
    });
}

لذلك ، عليك فقط إنشاء علامة HTML من بيانات JSON الخاصة بك والاتصال بالوظيفة الأولى بعد ذلك.

ليس بهذه الصعوبة ، أليس كذلك؟

Answer 2

نعم slaks على حق. لا شيء مجنون جدا هنا. سيكون لديك 2 متغيرات CurrentPagenumber و LastPagenumber.

$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");

for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
    $("div.paginator").append("<a...>"+ x +"</a>");
} 

$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");

// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber 
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to

Answer 3

يستخدم هذه أو الذي - التي توصيل في. كلاهما سهلة HTML Pagination الإضافات. ضع كل شيء في HTML في وقت واحد وتوصل مع واحد من هؤلاء.

Answer 4

أضف اثنين من المدخلات المخفية الجديدة

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

بعد ذلك ، أضف div فارغ لإنشاء ضوابط ترقيم الصفحات

<!-- An empty div which will be populated using jQuery -->  
<div id='page_navigation'></div>

$(document).ready(function(){

    //how much items per page to show
    var show_per_page = 5;
    //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 class="previous_link" href="javascript:previous();">Prev</a>';
    var current_link = 0;
    while(number_of_pages > current_link){
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
        current_link++;
    }
    navigation_html += '<a class="next_link" href="javascript:next();">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);
}