1

我有下面的 jquery 代码，当我单击复选框时，它会更新查询，一切正常我唯一的问题是我加载的页面有分页，当我单击下一步或其中一个分页链接时，它们刷新页面并丢失搜索。我想知道是否有办法在不重新加载页面的情况下打开页面内的链接。如果不是，那么对数据进行分页的最佳方法是什么。谢谢

这是我的jQuery代码：

$(document).ready(function () {
    $(".remember_cb").click(function () {
        var action = $("#criteria").attr('action');
        var form_data = $('#criteria').serialize();
        $.ajax({
            type: "POST",
            url: action,
            data: form_data,
            beforeSend: function () {
                $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast');
            },
            success: function (data) {
                $("#loading").fadeIn('fast');
                $('#exercise_list').html(data).fadeIn('slow');
                $("#loading").fadeOut('slow');
            }
        });
    });
    return false;
});

如果您需要我包含任何其他代码，请告诉我。任何帮助将非常感激。

4

1 回答 1

0

单击普通链接时，它会触发导航到其href. 您将不得不阻止导航行为，但仍会触发一些 JS，这些 JS 将使用下一页数据重新填充您的搜索结果。您可以在按钮的click事件处理程序中执行这两项操作：

var page = 1; //the page number we're currently on

$('a.nextPage').click(function(e) {
    e.preventDefault(); //stops navigation to the URL in the link

    var input = $('#criteria input[name="page"]'); 
    if (!input.length) {
       input = $('<input>', {type:'hidden', name:'page'}).appendTo("#criteria");
    }

    input.val(++page);

    var action = $("#criteria").attr('action');
    var form_data = $("#criteria").serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        beforeSend: function () {
            $('#loading').html('<center><img src="/images/loading8.gif" alt="Loading..." align="absmiddle"/></center>').fadeIn('fast');
        },
        success: function (data) {
            $('#exercise_list').html(data).fadeIn('slow');
            $("#loading").fadeOut('slow');
        }
    });
});

这段代码只是一个例子，但希望你能明白。我也会从你的success函数中去掉这条线：

$("#loading").fadeIn('fast');

这可能会产生奇怪的视觉效果，因为您的加载指示器已经可见。此外，小细节，但<center>标签已被弃用一段时间。只需使用居中对齐的 div。

于 2013-05-17T16:42:26.913 回答