Question

我正在寻找动态内容来填充由JSON回调的记录，下面的脚本工作非常好，从db中提取记录，经过一些考虑，如果说db表包含超过10000个++记录，是一种方法将回调记录限制为20，直到滚动到达listview数据角色的末尾，然后另外20条记录将从列表末尾拉出，依此类推。

PHP从db：

查询记录

<?php
header('Content-type: application/json');

$server = "localhost";
$username = "root";
$password = "";
$database = "test";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT employeeNumber, firstName, email, jobTitle FROM employees ORDER BY firstName";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {
$records[] = $row;
}

mysql_close($con);

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
?>

用于填充返回记录的Ajax：

$(document).ready(function() {
// load JSON data
var output = $('#output');
$.ajax({
    beforeSend: function() { $.mobile.loading('show'); },
    complete: function() { $.mobile.loading('hide'); },
    url: 'pool.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 10000,
    success: function(data, status){
        $.each(data, function(i, item){
            var i = i + 1;
            var employee = '<li><a href="#indexPage"><img src="images/head.jpg" />'
            + '<h3>#' + i + " " + item.firstName + '</h3>'
            + '<p>' + item.employeeNumber + '<br>'
            + item.email + '<br>'
            + item.jobTitle + '</p></a></li>';

            output.append(employee);
        });
    },
    error: function(){
        output.text('Error loading data!');
    }
});
});

结果将附在此处：

<div data-role="content">
    <div class="content-primary">   
        <ul data-role="listview" id="output" data-filter="true"></ul>
    </div>
</div>

请劝告，谢谢。

Answer 1

行。首先，您需要修改SQL和ajax调用以支持LIMIT 0,20的分页。添加到您的SQL：

$sql = "SELECT employeeNumber, firstName, email, jobTitle FROM employees ORDER BY firstName LIMIT ". mysql_real_escape_string($_REQUEST["page"]) . ",20";

这会将结果数量限制为从传递的页面计算到20个。

在javascript中你必须传递页面（从0开始）并存储当前页面。

url :'pool.php?page=' + page

并且您必须开始监视元素的滚动结尾

$("#scroller").bind("scroll", function(evt){  
    var el = $(this).get(0);
    if (el.offsetHeight + el.scrollTop >= el.scrollHeight) {
         loadResults(++page);
    }
});
function loadResults(page) {
     // perform your ajax call
}

这是一个简单的小提示，显示滚动结束检测http://jsfiddle.net/nxtwrld/bH5Lb/1/

Answer 2

<ul data-role="listview">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
</ul>



var timer    = setInterval(function () {
    scrollOK = true;
}, 100),
scrollOK = true,
count    = 20;
$(window).bind('scroll', function () {
if (scrollOK) {
    scrollOK = false;
    if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) {
        //now load more list-items because the user is within 100px of the bottom of the page
        console.log('You Hit Bottom!');
        var out = [];
        for (var i = 0; i < 10; i++) {
            out.push('<li>' + (count++) + '</li>');
        }
        $('ul').append(out.join('')).listview('refresh');
    }
}
});

请参阅此链接http://jsfiddle.net/knuTW/

Phonegap + Jquery mobile + JSON，当滚动到达listview的末尾时附加更多结果

2 个答案: