4

したがって、テーブルはページ上にあります


<table width="100%" id="ticketListTable" class="genmed"></table>

次に、AJAX を使用してデータを返します


$.ajax({
    type: 'POST',
    url: "ticketAjax.php",
    data: '&m=swapTicketList',
    dataType: "json",
    success: function(resultData) {
        $('#ticketListTable').dataTable({
            "aaData": resultData,
            "aaSorting": [[0, "desc"]],
            "bJQueryUI": true,
            "bScrollInfinite": true,
            "bScrollCollapse": true,
            "bDestroy": true,
            "bDeferRender": true,
            "iDisplayLength": 100,
            "sScrollY": "1000px",
            "sDom": "Rlfrtip",
        });
    }
});

AJAX が動作し、戻ってきました


[{"ID":["17316","17314","17313","17312","17311","17310","17309","17308","17307"....

ただし、aaData はその Json データをテーブルに入力していません。これがどのように機能するかを誤解していますか？私はかなりの数のフォーラムや投稿を読みましたが、それらはすべてこのタイプの使用法につながるようです.

4

2 に答える 2

2

オブジェクトではなく、データの配列の配列を提供する必要があります。また、列を定義します。サブ配列は個々の行を表し、メイン配列はすべての行をラップします

JS Array例に従ってください

http://www.datatables.net/release-datatables/examples/data_sources/js_array.html

提供されたネストされた配列構造に注意しaaData、その構造に従います

于 2013-03-29T18:44:44.673 に答える
1

わかりました、思ったほど簡単ではありませんでした。AJAX では、配列を作成してから、別の配列内で json_encode を使用して返す必要がありました。

json_encode(array('tickets' => $tickets)) //-- WHERE $tickets = array(array(1, 'Options 1'), array(2, 'Options 2'))

また、列ヘッダーを配列として返す必要がありました

json_encode(array('tickets' => $tickets, 'headers' => $headers)) //-- WHERE $headers = array('ID', 'Options', etc..)

$headers の要素の量は、$tickets と一致する必要があります。そうしないと、テーブルが初期化されません。

次に、ヘッダーのJS部分は

            aoColumnArray = [];
        $.each(resultData.headers, function(index, value) {
            var aoColumns = new Object;
            aoColumns['sTitle'] = value;
            aoColumns['sClass'] = 'genmed';
            aoColumnArray.push(aoColumns);
        });

データテーブルオブジェクトを構築します

            ticketTable= [];
        ticketTable.aaData = resultData.tickets;
        ticketTable.aaSorting = [[0, "asc"], [1, "desc"], [2, "desc"]];
        ticketTable.aoColumns = aoColumnArray;
        ticketTable.bJQueryUI = true;
        ticketTable.bScrollInfinite = true;
        ticketTable.bScrollCollapse = true;
        ticketTable.bDestroy = true;
        ticketTable.bDeferRender = true;
        ticketTable.iDisplayLength = 50;
        ticketTable.sScrollY = '400px';
        ticketTable.sDom = 'Rlfrtip';
        $('#ticketTable').dataTable(ticketTable);

使用したいオプションを使用してください。重要な部分は、処理される resultData です。aaData と aoColumns は、AJAX 化されたデータが使用される場所です。ちなみに、これらはすべて ajax 呼び出しの成功関数で初期化されます。

うまくいけば、それは他の誰かを助けるでしょう！

于 2013-04-04T19:36:29.430 に答える