向下滚动以加载更多搜索数据

Question

我在一起搜索了mysql数据库的以下代码，但我只知道如何创建指向下一页的链接。 当我滚动到底部时，有什么方法可以加载更多数据。 如果是这样，如何使用以下代码实现它？

$currentPage = $_SERVER["PHP_SELF"];

$maxRows_searchHH = 20;
$pageNum_searchHH = 0;
if (isset($_GET['pageNum_searchHH'])) {
  $pageNum_searchHH = $_GET['pageNum_searchHH'];
}
$startRow_searchHH = $pageNum_searchHH * $maxRows_searchHH;

$colname_searchHH = "-1";
if (isset($_GET['searchString'])) {
  $colname_searchHH = $_GET['searchString'];
}
mysql_select_db($database_conn_happyhours, $conn_happyhours);
$query_searchHH = sprintf("SELECT name, address, hhName, phone, dayOfTheWeek, hours, `description`, imageURL, website, cost, googleMap FROM happyhours WHERE address LIKE %s ORDER BY name ASC", GetSQLValueString("%" . $colname_searchHH . "%", "text"));
$query_limit_searchHH = sprintf("%s LIMIT %d, %d", $query_searchHH, $startRow_searchHH, $maxRows_searchHH);
$searchHH = mysql_query($query_limit_searchHH, $conn_happyhours) or die(mysql_error());
$row_searchHH = mysql_fetch_assoc($searchHH);

if (isset($_GET['totalRows_searchHH'])) {
  $totalRows_searchHH = $_GET['totalRows_searchHH'];
} else {
  $all_searchHH = mysql_query($query_searchHH);
  $totalRows_searchHH = mysql_num_rows($all_searchHH);
}
$totalPages_searchHH = ceil($totalRows_searchHH/$maxRows_searchHH)-1;

$queryString_searchHH = "";
if (!empty($_SERVER['QUERY_STRING'])) {
  $params = explode("&", $_SERVER['QUERY_STRING']);
  $newParams = array();
  foreach ($params as $param) {
    if (stristr($param, "pageNum_searchHH") == false && 
        stristr($param, "totalRows_searchHH") == false) {
      array_push($newParams, $param);
    }
  }
  if (count($newParams) != 0) {
    $queryString_searchHH = "&" . htmlentities(implode("&", $newParams));
  }
}
$queryString_searchHH = sprintf("&totalRows_searchHH=%d%s", $totalRows_searchHH, $queryString_searchHH);

Answer 1

您想要的就是无限滚动。 另一个可能对您有用的问题在这里： 在AJAX（jQuery）加载日期的div中无限滚动

Answer 2

我建议您使用javascript，jquery和html：

1）页面的第一个结构HTML：页面上有一个div，您要在其中添加更多数据

    <div id="divMyData"></div>

2）创建一个函数，根据提供的数据获取更多数据，然后在滚动事件中使用它， 关键是您需要以JSON格式获取下一页的数据 。

    <script type="text/javascript">
    var currentPage = 0;
    var isShowMore = false;

    function loadData(c){ 
        $.ajax({
            cache: !1,
            type: "POST",
            url: e, // url of the method to call
            data: $.toJSON(c), // you are passing the parameter needed by method called
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                // Key to append
                $("#divMyData").html($("#divMyData").html() + result.htmlData);
                // and you may implement more logics according to your requirements
                isShowMore = false;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                //alert(xhr.status);
            }
        });
    }

    function scrollEvent(e) {
        var body = document.body,
             html = document.documentElement;

        var docHeight = Math.max(body.scrollHeight, body.offsetHeight,
                               html.clientHeight, html.scrollHeight, html.offsetHeight);
        var currentScroll = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        // condition to check if scroll is at bottom (25% height of document you may change it according to your requirement)
        if (((docHeight * 75) / 100) < currentScroll) {
            if (!isShowMore) {
                isShowMore = true;
                currentPage = currentPage + 1;
                //i am providing an example of data that you can pass to ajax as variable c, change it according to your need 
                var c = {
                        categoryId: 1,
                        Range: "100 - 40000",
                        pageNumber: currentPage,
                        orderby: "name"
                    };
                loadData(c); 
            }
        }
    }

    // Attaching scroll event when document/window is loaded
    function OnFirstLoad() {
        if (document.attachEvent) {
            document.attachEvent('onscroll', scrollEvent);
        } else if (document.addEventListener) {
            document.addEventListener('scroll', scrollEvent, false);
        }

    }
    window.onload = OnFirstLoad;
</script>

htmlData是对象属性的名称，您将在调用的服务器方法中返回。 我在php中将服务器端实现留给您