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

Question

I have out together the following code that searches a mysql database but I only know how to create links to the next pages. Is there any way to load more data when I scroll to the bottom. If so, how can implement it with the following code?

$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

What you want is called infinite scroll. Another question that would probably work for you is here: Infinite scrolling inside a div with AJAX (jQuery) loaded date

Answer 2

I would suggest you for using javascript, jquery and html:

1) first Structure HTML of page : on page have a div in which you want to append more data

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

2) Create a function for getting more data based on data provided and then use it on scroll event, Key is that you will need to get your data of next page in JSON format .

    <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 is the name of property of object, you are returning in server method you have called. I leave server side implementation on you in php