3

我正在使用 Jquery mobile 创建一个移动应用程序。我正在将数据从 mysql DB 获取到 PHP 页面,并将数据编码为 Json,然后我使用 Jquery ajax 请求将其呈现在我的 HTML 页面中,并将数据附加到 JQM 'listview' 但由于数据量很大,我当用户滚动到“延迟加载”页面底部时,希望逐渐加载列表视图

我的 PHP 代码示例:

$result = mysql_query("SELECT * FROM $tableName ORDER BY alpha");

$array = mysql_fetch_row($result);     

    $data = array();    
    while ($row = mysql_fetch_row($result))
    {   
    $data[] = $row;

    }

    echo $_GET['callback'] . '('.json_encode($data).')';

我的 JS 代码:

 $.ajax({ 
  type: "POST",                                     
  url: 'http://example.com/api.php',  
  dataType: 'jsonp',
  contentType: "application/json",
  cache: false,
  success: function(data)
  { 
  $("#loading").hide();  
    for (var i in data) 
    {
      var row = data[i];          
      var id =  row[0];
      var alpha = row[1]
      var name =row[2];
      var url = row[3];   

     $("#filelist").append('<li id="'+id+'"><input name="name'+id+'" id="song'+id+'" type="checkbox" class="selectme"><label for="song'+id+'" rel="'+url+'">'+name+'</label></li>').trigger("create");   
     $("#filelist").listview("refresh");

    }
      $("#filelist").listview("refresh");

});

这工作正常,但从数据库加载我的所有数据我如何可以加载数据块而不是一次我使用航点插件检测滚动到底部动作我现在需要的只是帮助从数据库逐渐加载数据

注意:我尝试使用 dcarrith.github.io/jquery.mobile.lazyloader/ 但无法找到解决方案。

非常感谢您的帮助

更新: 我设法在不同页面中加载来自 DB 的 Json 数据,因此我可以从网址 www.myDomain.com/api.php?page=2 和 www.myDomain.com/api.php? 调用前 10 个项目? page=1 等等,当你在 jquery Ajax 请求中调用它时,你只加载这个数量的数据。

实现分页的代码如下:

<?php
  header('Content-type: text/html; charset=utf-8');
  $host = "xxxxxxxxxxx";
  $user = "xxxxxx";
  $pass = "xxxxxx";

  $databaseName = "xxxxxxx";
  $tableName = "xxxxxxxx";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

    $tbl_name="xxxxxx";     //your table name
    // How many adjacent pages should be shown on each side?
    $adjacents = 3;

    /* 
       First get total number of rows in data table. 
       If you have a WHERE clause in your query, make sure you mirror it here.
    */
    $query = "SELECT COUNT(*) as num FROM $tbl_name";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages[num];

    /* Setup vars for query. */
    $targetpage = "test.php";   //your file name  (the name of this file)
    $limit = 10;                                //how many items to show per page
    $page = $_GET['page'];
    if($page) 
        $start = ($page - 2) * $limit;          //first item to display on this page
    else
    $start = 0;                             //if no page var is given, set start to 0

    /* Get data. */
    $sql = "SELECT * FROM $tbl_name ORDER BY alpha LIMIT $start, $limit";
    mysql_query("SET NAMES utf8;");
    $result = mysql_query($sql);

    /* Setup page vars for display. */
    if ($page == 0) $page = 1;                  //if no page var is given, default to 1.
    $prev = $page - 1;                          //previous page is page - 1
    $next = $page + 1;                          //next page is page + 1
    $lastpage = ceil($total_pages/$limit);      //lastpage is = total pages / items per page, rounded up.
    $lpm1 = $lastpage - 1;                      //last page minus 1

    /* 
        Now we apply our rules and draw the pagination object. 
        We're actually saving the code to a variable in case we want to draw it more than once.
    */
    $pagination = "";
    if($lastpage > 1)
    {}
?>

    <?php
    $data = array();
        while($row = mysql_fetch_array($result))
        {

        // Your while loop here
        $data[] = $row; 

        }
        echo $_GET['callback'] . '('.json_encode($data).')';
    ?>

<?=$pagination?>

现在剩下的是:

如何使 JQ AJAX 请求动态调用?PAGE=2 然后?PAGE=3 直到内容结束!?

我可以使用 WAYPOINT 插件检测滚动到底部的操作 - 非常感谢您的帮助 - 谢谢

4

2 回答 2

4

您将要向您的 PHP API 和 jQuery Mobile App 教授“偏移”和“限制”的概念。

假设您想一次加载 10 个元素:

您的第一个要求是:

http://example.com/api.php?offset=0&limit=10

您的第二个请求(在滚动时触发)将是:

http://example.com/api.php?offset=10&limit=10

您可以将此 ajax 结果附加到现有列表中...

在你想要的 PHP 方面:

mysql_query("SELECT * FROM $tableName ORDER BY alpha LIMIT $limit OFFSET $offset")
于 2013-08-27T00:30:37.883 回答
0

这已经是两年了。但我想我有个主意。如果您将 ajax 放在一个函数中,然后每当您检测到页面结束时,您就会调用该函数。并动态更改网址。

于 2015-04-18T12:05:07.597 回答