jQuery使用经典asp在div中记录分页

Question

我的任务是使用 Ajax/jQuery 而不是在 iFrame 中对 MySQL 查询结果进行分页。我们当前使用的 iFrame 内容在这里:http://www.stratusinternational.com/headerlatest.asp?Page=1&L=EN

当前页面每 10 秒刷新一次，经过(页码+1)直到到达末尾(第 329 页)。每页读取 4 个结果，并且我们在适用的情况下包含后退和下一页按钮。

我们想要做的是拥有相同的功能，但不是 iFrame，而是将结果包含在具有所有相同功能的 div 中。我整晚都在寻找解决方案，但迄今为止我找到的唯一一个解决方案不支持移动到下一页。

想要改变我们所做的事情的原因是 iFrame 分页记录在历史中，因此点击浏览器后退按钮的访问者必须在页面历史记录之前一直循环浏览 iFrame 历史记录。

如果没有简单的解决方案，我们深表歉意。如果需要，可以提供代码。

非常感谢任何帮助。

Answer 1

好的，这里有一些示例代码，可以帮助您入门。

您可以将大部分 headerlatest.asp 脚本保留原样，但需要进行一些更改并添加一些 JavaScript。

删除以下行(这是每 10 秒重新加载页面的行)。这将被 AJAX 调用取代。

<meta http-equiv="refresh" content="10;url=?Page=65&L=EN"/>

给出您的上一个和下一个按钮 ID:

<a id="prev" href="?L=EN&Page=63" style="text-decoration: none"><img src="images/prevframe.png" border="0"></a>

<a id="next" href="?L=EN&Page=65" style="text-decoration: none"><img src="images/nextframe.png" border="0"></a>

为包含四列的 TABLE 周围的 DIV 指定一个 ID:

<div id="content" align="center">

在页面上包含 jQuery 并添加一些 JavaScript 来处理内容和上一个/下一个按钮的刷新。您可能需要对此进行更改以满足您的需求，例如处理最大页面数的部分。

<script type="text/javascript">
$(function () {
    var page = 1;

    $(".prev").click(function () {
       UpdatePage(-1); 
        return false;
    });

    $(".next").click(function () {
       UpdatePage(1);
        return false;
    });

    function UpdatePage(ctr) {
        if (typeof ctr === "undefined") {
            page = page + 1;
        } else {
            page = page + ctr;
        }
        if (page > 10) //maximum (if needed)
            page = 1; //go to first
        //if (page < 1) //minimum 
        //   page = 10; //go to maximum
        if (page == 1) {
            $("#prev").hide();
            setTimeout(UpdatePage, 1000 * 10);
            return;
        } else {
            $("#prev").show();
        }

        $.ajax({
            type: "GET",
            url: "/myservice.asp", //this page needs to return the table content
            data: "{'page':" + page + ",'L':'EN'}",
            contentType: "text/html;",
            cache: false,
            success: function (content) {
                $("#content").html(content);
                setTimeout(UpdatePage, 1000 * 10);
            },
            error: function () {
                alert("Error");
            }
        });
    }

    setTimeout(UpdatePage, 1000 * 10);
});
</script>

最后，您需要创建第二个名为 myservice.asp 的脚本，该脚本基本上包含 headerlatest.asp 的大部分代码，但它应该只返回 <div align="center"> 内的内容。里面有表格。

工作原理:第一次调用时，您的页面操作与现在相同。但 10 秒后，将通过 AJAX 请求新内容，并将其注入(inject)到内容 DIV 中。然后，上一个和下一个按钮也将使用 AJAX 来请求适当的内容。

让我知道进展如何或者您是否需要任何帮助。

编辑:

不要像现在一样隐藏第 1 页上的上一个按钮，而是仅在第 1 页上将其设置为 CSS display:none。更新后的 JavaScript 现在将负责隐藏和显示上一个按钮。

<a id="prev" href="?L=EN&Page=1" style="display:none;text-decoration: none"><img src="images/prevframe.png" border="0"></a>