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

时间:2013-12-23 04:15:05

标签: javascript php jquery mysql load

我在一起搜索了一个搜索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);

2 个答案:

答案 0 :(得分:0)

你想要的是无限滚动。另一个可能对您有用的问题是:Infinite scrolling inside a div with AJAX (jQuery) loaded date

答案 1 :(得分:0)

我建议您使用javascript,jquery和html:

1)first page of page:在页面上有一个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中将服务器端实现留在了你身上