jqueryを使用したデータベース結果のページング

Question

jqueryを使用してデータベースからいくつかの結果をページするのがどれほど難しいかに関する情報を探しています。私はすでにプラグインを見つけましたが、私はそれが私が必要と思うものではありません。

私は8つのテキストボックスを持つフォームを持っています。私は、これらの8つのテキストボックスに最初のデータベース結果を入力し、さらに結果がある場合はページングを表示します。より多くの結果がある場合、ユーザーは次のボタンをクリックして新しいデータをテキストボックスにインポートすることができます。

誰もが何か提案がありますか？

Answer 1

あなたが使用しているプラ​​ットフォームが何も記載されていません。それはASP.NET MVCですか？ Ruby on Rails？ページングのサポートは、通常、基盤となるプラットフォームに組み込まれています。

AJAXまたはJSON呼び出しを作成する場合は、jQueryがその機能を実行できることは確かですが、その呼び出しは、使用しているプラ​​ットフォームによって異なります。

それはルビーである場合は、ここでいくつかのガイダンスを見つける必要があります。 http://www.sitepoint.com/article/ajax-jquery/

Answer 2

これを行う方法（または私はそれを行う方法が）私はページネーションリンクにAJAX呼び出しを結合することです。リンクにはURLが組み込まれており、参照するページを知っています。

<a class="pager" href="/ajax_pages/get_results.php?page=3"> 3 </a> 

今あなたが「ライブ」使用しているので、手動で新しく生成されたHTMLをバインドする必要はありませんjqueryのライブ機能

$(function() { 
     $('a.pager').live('click',function() { 
      var url = $(this).attr('href'); 
      $('#destination').load(url); 
     } 
} 

を使用して、これらのリンクにクリックを傍受することができます。そしてあなたのリンクはすぐに行く準備ができています。

あなたがしなければならないことは、要求されたページと制限（バックエンドサービスが知るべきである）に基づいてオフセット値を生成することだけです。

代替方法は非常に近いですが、javascriptでもっと多くの作業が必要です。あなたのページャが呼び出すサービスに、jsonエンコードされたデータを返すようにしてください。コールバック関数はページにこのデータを入力し、正しく動作するようにページネーションリンクを更新する必要があります。

これは、毎回フォーム全体を吹き飛ばしているよりも、よりエレガントな解決策ですが、より多くの作業が必要です。それは目立つ違いになることはまずありません。

Answer 3

個人的には、5ページ以上はないと知っていれば、私はAjaxを完全に捨てるだろう...私はそれが好きではない...私はちょうど考えていないこの場合に必要です。

<?php 
// Example Database result (say, 2 "pages" worth)... 
// We'll pretend the cells in your database match the textarea names... 
$results = array(
    [0] => array(
     'textbox1'=>'abc', 
     'textbox2'=>'def', 
     'textbox3'=>'ghi', 
     'textbox4'=>'jkl', 
     'textbox5'=>'mno', 
     'textbox6'=>'pqr' 
     'textbox6'=>'stu' 
     'textbox6'=>'vwx' 
    ), 
    [1] => array(
     'textbox1'=>'cba', 
     'textbox2'=>'fed', 
     'textbox3'=>'ihg', 
     'textbox4'=>'lkj', 
     'textbox5'=>'onm', 
     'textbox6'=>'rqp' 
     'textbox6'=>'uts' 
     'textbox6'=>'xwv' 
    ) 
) 
$json_results = json_encode($results); 
?> 

<!-- Generate some jQuery and HTML --> 
<script language="javascript"> 
    var pages = eval('<?=$json_results;?>'); 
    $(function() { 
     $('.page_num').live('click',function() { 
      var page = $(this).attr('rel'); 
      if(pages[page] && pages[page].length > 0) { 
       $.each(pages[page],function(key,value) { 
        // assuming your key names are the same as the 
        // names of your textareas 
        $('textarea[name="'+key+'"]').value(value); 
       }); 
      } else { 
       alert("Oops, that page doesn't exist for some reason..."); 
      } 
     }); 
    }); 
</script> 

<?php foreach($results[0] as $key=>$value): ?> 
<textarea name="<?=$key?>"><?=$value;?></textarea> 
<?php endforeach; ?> 

<div id="page_nums"> 
<?php for($i=1;$i<=sizeof($results)-1;$i++): ?> 
<a class="page_num" href="#" rel="<?=$i;?>"><?=$i;?></a> 
<?php endfor; ?>