जावास्क्रिप्ट/jquery का उपयोग कर पेज नंबर जेनरेट करें?

Question

जावास्क्रिप्ट/jquery का उपयोग कर नीचे दिए गए पेज नंबर कैसे उत्पन्न करें?: 5 वीं पेज चयन किया जाता है

तो मैं 3,4 और 6,7 और भी 1, पिछला, अगले ... कोई भी सुझाव के साथ अंतिम पृष्ठ ....

संपादित दिखाने के लिए

जेसन डेटा के साथ कैसे काम करें जो इन पेजिनेशन div का उपयोग करते हैं? (यानी) मेरी json डेटा 50 रिकॉर्ड मैं 10 करना चाहते पेज 1 में और इतने पर शामिल हैं ... इन नंबरों के साथ json डेटा ...

मैं एक jQuery समारोह चाहते currentpageno,lastpagenumber पारित करने के लिए पृष्ठ पर अंक लगाना और समारोह चाहिए कैसे मुझे नीचे मेरे लिए

की तरह पेज नंबर जेनरेट यदि यह पहले पृष्ठ

istpage http://img156.imageshack.us/img156/2527/1pagel.jpg

यदि यह बीच में है,

Pager http://img98.imageshack.us/img98/7278/pagersy.jpg

, यदि यह अंतिम पृष्ठ होता है

lastpage http://img204.imageshack.us/img204/541/lastpage.jpg

दूसरा संपादित करें:

मैं इस समारोह की कोशिश की है, लेकिन वांछित परिणाम

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

(इसे डाउनलोड here)

---

संपादित करें: जब से तुम यह काम कर रहा है, यहाँ प्राप्त करने के लिए सक्षम होने के लिए नहीं है एक ही रास्ता है कि कैसे आप प्लगइन का उपयोग कर सकते हैं (कई अलग अलग की) है।

चरण 1: निम्नलिखित की तरह आपके JSON-डेटा से मार्कअप उत्पन्न करें:

<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> 

विचार जब एक पृष्ठ-लिंक पर क्लिक करने प्रदर्शन 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! 
    }); 
} 

तो, आपको बस अपने JSON डेटा से HTML मार्कअप जेनरेट करना होगा और बाद में इनिट-फ़ंक्शन को कॉल करना होगा।

यह मुश्किल नहीं है, है ना?

Answer 2

हाँ @ एसएलएक्स सही है। यहां कुछ भी पागल नहीं है। आपके पास 2 चर वर्तमान PageNumber और 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

उपयोग THIS या THAT प्लगइन। वे दोनों आसान एचटीएमएल पेजिनेशन प्लगइन्स हैं। एचटीएमएल में सब कुछ एक साथ रखो और उनमें से एक के साथ पेजिनेट करें।

Answer 4

दो नए छिपा आदानों

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

जोड़े अगला पृष्ठांकन नियंत्रण

<!-- 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); 
}