0

ここのドキュメントに従って、サーバー側のコードを実装しました。

JS コード

$('#datatable_paging').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "#### my php file path ####",
 });

JSONデータを次のように取得しています

{
    "sEcho": 0,
    "iTotalRecords": 19,
    "iTotalDisplayRecords": "19",
    "aaData": [
        ["1", "peter", "peter@gmail.com"],
        ["2", "john", "john@yahoo.com"],
        ["3", "raj", "raj@in.com"],
        ["4", "selvin", "selvin@gmail.com"],
        ["5", "ismail", "ismail@gmail.com"],
        ["6", "muadth", "muad@hotmail.com"],
        ["7", "ahmed", "ahmed@gmail.com"],
       .....
    ]
}

ここで、この JSON の結果を Datatable ページネーションを使用して下の表に表示する必要があります

HTMLコード

    <table id="datatable_paging">
        <thead>
          <tr>
            <th>Id </th>
            <th>Name</th>
            <th>E-mail</th>                
          </tr>
        </thead>            
  </table>
4

3 に答える 3

3

これに答えている人は、このように考えすぎています。オプションを正しく設定すると、データテーブルは派手なループ/割り当て/などなしで出力を処理します。仕様で説明されているように、JSON の戻り値が適切であると仮定します。

HTML:

 <table id="datatable_paging"></table>

次に、jQuery:

var oTable = $('#datatable_paging').dataTable( {        
        "bDestroy":true,
        "bStateSave": true,
        "aaSorting": [[1, "asc"]], 
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "#### my php file path ####",
        "bJQueryUI": true,
        "bAutoWidth": false,
        "bFilter":true,
        "bLengthChange": true,
        "bPaginate": true,
        "bSort": true,
        "iDisplayLength": 10,
        "bInfo": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            { "sTitle": "Id", "sWidth": "33%"},
            { "sTitle": "Name", "sWidth": "33%"},
            { "sTitle": "Email", "sWidth": "33%"}
        ]
    })

PHPソースが正しくフィルタリングされていると仮定すると、ページングなどは適切にセットアップされます。たとえば、10 件の結果が得られるはずなのに 19 件の結果が得られていることがわかった場合、問題は jQuery ではなく、ソースにあることがわかります。あなたの例では、ソースは、19 のうち 19 の合計結果を返していると述べており、bPaginate が指定されていないため、ページングが機能していません。aoColumns は頭をセットアップします。本当に必要でない限り、HTML で行う必要はありません。他の関数については、datatables サイトで十分に文書化されていますが、混乱している場合は質問してください。

于 2012-12-06T18:16:24.177 に答える
0

「aaData」をループして、fnAddData を使用して新しい行を直接追加することができます。

たとえば、ここを確認してください: http://datatables.net/examples/api/add_row.html

編集：あなたの例も。

var aaData = theVariableHoldingTheJsonObject.aaData;
$("#datatable_paging").dataTable().fnAddData ( aaData )

それは基本的にそれです

于 2012-12-06T05:32:41.450 に答える
0

It seems like you should send back a correct "sEcho" variable in JSON.

It is information that DataTables needs to know about the data being sent back, in order to be able to render. You need to pass back to DataTables the value that was sent.

sEcho is described here: http://datatables.net/usage/server-side

So to get your example works change "sEcho" to 1 or better write like this:

"sEcho": int(request.vars['sEcho'])   #python code
于 2012-12-06T16:12:43.077 に答える