2013-08-26 54 views
2

我正在創建一個使用jquery mobile的移動應用程序。我正在從mysql數據庫獲取數據到PHP頁面,並將數據編碼爲Json,然後使用Jquery ajax請求將其呈現在我的HTML頁面中,並將數據附加到JQM'listview',但由於數據量巨大要逐步加載列表視圖時,用戶滾動頁面 「延遲加載」來自mysql/php的LazyLoad內容Json編碼的數據和Jquery

我的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/但無法達成解決方案。

你的幫助是極大的讚賞

UPDATE: 我設法裝入我的JSON數據從DB進來的不同的頁面,所以我可以調用從URL www.myDomain.com/api第10個項目。 php?page = 2和www.myDomain.com/api.php?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呢?直到內容結束!!

我可以檢測與航點PLUGIN BOTTOM ACTION滾動 - 你的幫助是極大的讚賞 - 感謝

回答

1

你會想教你的PHP API,以及你的jQuery Mobile的應用程序的概念'抵消'和'限制'。

比方說,你想在一次加載元件10:

你的第一個要求是:

http://example.com/api.php?offset=0&limit=10 

你第二次請求(觸發滾動)是:

http://example.com/api.php?offset=10&limit=10 

您會將此ajax結果附加到現有列表中...

在PHP端你想要:

mysql_query("SELECT * FROM $tableName ORDER BY alpha LIMIT $limit OFFSET $offset") 
+0

感謝AllinOne爲我指出了這一點,我研究了限制和偏移量,並創建了一個PHP頁面,現在我可以導航到結果:?page = 1,當我向它發出Ajax請求時,這可以通過我的JS代碼讀取,現在我正在研究如何動態實現這一點,當我滾動到底部並動態導航到頁面2時,直到達到數據庫(頁面)的內容末尾。 – Bishak

0

這就像已經兩年了。但我想我有個主意。如果你把ajax放在一個函數中,然後每當你檢測到頁面結束,你就調用函數。並動態更改網址。