我正在使用 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 插件检测滚动到底部的操作 - 非常感谢您的帮助 - 谢谢