從JSON數據彈出分頁

Question

我期待在彈出窗口中添加分頁。我試圖尋找一個插件，但沒有發現任何可以用彈出窗口工作的東西。我正在獲取JSON數據。原因是因爲數據回來太大，甚至不允許彈出窗口滾動。有沒有人做過這樣的事情，我可以看到它是如何完成的。下面的示例代碼。 謝謝！

JSON數據樣本：

[ 
    { 
    "name" : "Jonathan Suh", 
    "gender" : "male" 
}, 
{ 
    "name" : "William Philbin", 
    "gender" : "male" 
}, 
{ 
    "name" : "Allison McKinnery", 
    "gender" : "female" 
}, 
{ 
    "name" : "Becky Borgster", 
    "gender" : "female" 
}, 
{ 
    "name" : "Victoria Einsteen", 
    "gender" : "female" 
} 
{ 
    "name" : "Suh EH", 
    "gender" : "male" 
}, 
{ 
    "name" : "Mar Lee", 
    "gender" : "female" 
}, 
{ 
    "name" : "Croc Dyllo", 
    "gender" : "male" 
}, 
{ 
    "name" : "Auter Naddo", 
    "gender" : "male" 
}, 
] 

JS代碼：

$("document").ready(function(){ 

    $('#myForm').submit(function(e) { 

     // To stop the default behavior, a # will be added to the URL in the address bar. 
     e.preventDefault(); 

     var datastring = $("#myForm").serialize(); 

     $.ajax({ 
      type: "POST", 
      dataType: "json", 
      url: "get_json.pl", 
      data: datastring, 
      success: function(data) { 

       var stable = '<div class="popup-inner">' + 
          ' <h2>Results</h2>' + 
          ' <div>'; 

       $.each(data,function(key,value) { 
        stable += '<p><a href="results_1.pl?name=' + value.name + '&gender=' + value.gender + ' "id="btnSend">Name: ' + value.name + '</a> | ' + 'Gender: ' + value.gender + '</p>'; 
       }); 

       stable += ' </div>'+ 
          '<p><a data-popup-close="popup" href="#">Close</a></p>'+ 
          '<a class="popup-close" data-popup-close="popup" href="#">x</a>'+ 
          '</div>'; 

       // Popup will be called here and opended in the div below 
       $('#popup').append(stable).fadeIn(350); 

       // This function will close the popup on click. 
       $('[data-popup-close]').on('click', function(e) { 
        var targeted_popup_class = jQuery(this).attr('data-popup-close'); 
        $('#'+targeted_popup_class).fadeOut(350); 
        // Or use the id from the div below to close it. 
        //$('#popup').fadeOut(350); 
        e.preventDefault(); 
       }); 
      }, 
      error: function() { 
       alert('Error handing data'); 
      } 
     }); 
    }); 
}); 

HTML代碼：再次

<form id="myForm"> 
<input type="text" name="name" value="" placeholder="Search by Name" /> 
<input type="submit" name="submit" value="Submit form" /> 
</form> 


<div class="popup" id="popup"> 
</div> 

謝謝！

Answer 1

在這裏你有一個簡單的選擇來做到這一點。你可以就像你想讓它變得複雜....

$.ajax({ 
    type: 'POST', 
    dataType: 'json', 
    url: 'get_json.pl', 
    data: datastring, 
    success: function(data) { 

     var stable = '<div class="popup-inner">' + 
        '<h2>Results</h2>' + 
        '<div id="results">'; 

     $.each(data,function(key,value) { 
      stable += '<p><a href="results_1.pl?name=' + value.name + '&gender=' + value.gender + ' "id="btnSend">Name: ' + value.name + '</a> | ' + 'Gender: ' + value.gender + '</p>'; 
     }); 

     stable += '<div id="pagination">' + 
        '<span id="previous">Previous</span> ' + 
        '<span id="next">Next</span>' + 
        '</div>' + 
        '</div>' + 
        '<p><a data-popup-close="popup" href="#">Close</a></p>' + 
        '<a class="popup-close" data-popup-close="popup" href="#">x</a>' + 
        '</div>'; 

     // Popup will be called here and opened in the div below 
     $('#popup').append(stable).fadeIn(350); 

     // Pagination. 
     var pageSize = 4, 
      pageStart = 0, 
      nItems = $('div#results p').length; 

     $('div#results p').hide().slice(pageStart,pageStart+pageSize).show(); 

     $('div#pagination span').click(function() { 
      if ((this.id == 'previous') && (pageStart>=pageSize)) 
       pageStart -= pageSize; 
      else if ((this.id == 'next') && ((pageStart+pageSize)<nItems)) 
       pageStart += pageSize; 

      $('div#results p').hide().slice(pageStart,pageStart+pageSize).show(); 
     }); 

     // This function will close the popup on click. 
     $('[data-popup-close]').on('click',function(e) { 
      e.preventDefault(); 
      $('div#popup div.popup-inner').fadeOut(350); 
     }); 
    }, 
    error: function() { 
     alert('Error handing data'); 
    } 
});