0

我正在寻找动态内容来填充由 JSON 回调的记录，下面的脚本非常适合从数据库中提取记录，经过一番考虑，如果假设数据库表包含超过 10000 条记录，这是一种方式将回调记录限制为 20 条，直到滚动到达列表视图数据角色的末尾，然后将从列表末尾拉出另外 20 条记录，依此类推。

PHP 从数据库中查询记录：

<?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>

请多多指教，谢谢。

4

2 回答 2

0

好的。首先，您需要修改 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
}

​</p>

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

于 2012-10-30T12:35:59.110 回答
0 
<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/

于 2014-02-19T09:30:39.437 回答