0

JSON によるコールバックであるレコードを入力する動的コンテンツを探しています。以下のスクリプトは、データベースからレコードを引き出すのに非常に優れています。10000++ を超えるレコードが含まれる db テーブルがあるとしましょう。スクロールがリストビューのデータロールの最後に達するまでコールバック レコードを 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の呼び出しを変更して、LIMIT0,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 に答える