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

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

弹出的分页来自JSON数据

1 个答案: