Phonegap + JQuery的移動+ JSON，當滾動到達列表視圖的末尾時追加更多結果

我正在尋找動態內容來填充由JSON回調的記錄，下面的腳本正在工作只是極好的從db拔出記錄，經過一番思考記住，如果讓db表包含超過10000 ++記錄，是一種將回調記錄限制爲20的方法，直到滾動到達listview數據角色的末尾，那麼另外20條記錄將從列表末尾等。Phonegap + JQuery的移動+ JSON，當滾動到達列表視圖的末尾時追加更多結果

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>

敬請指教，謝謝。

來源

2012-10-30 conmen

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

來源

2012-10-30 12:35:59 nxtwrld

不起作用，記錄根本不顯示。 – conmen

這可能有很多原因。你使用通用滾動或類似iscroll的東西？你在哪裏存儲var page = 0上下文？ SQL是否僅使用LIMIT 0,20返回20個結果？ – nxtwrld

是的，它返回了20個結果，當頁面加載時，我的ajax調用似乎無法在函數中觸發。 – conmen

<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-19 09:30:39

Phonegap + JQuery的移動+ JSON，當滾動到達列表視圖的末尾時追加更多結果

回答

相關問題