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