2

DataTablesを使用して、内部APIからの結果の簡単な表示をすばやく作成しようとしています。APIは次の構造でJSONを返します。

obj { 
    status: 1,
    results: 100,
    offset: 25,
    limit: 25,
    data: [
        [1]: {
           title: "Blah blah one",
           description: "Doesn't really matter",
           misc: "Yadda yadda"
        },
        [2]: {
           title: "Blah blah two",
           description: "Doesn't really matter",
           misc: "Yadda yadda"
        },
    ]
}

DataTablesが奇妙な構造を使用しているという理由だけで、API構造を変更することはできません/したくないのですが、ページング、動的読み込みなどの組み込み機能にアクセスしたいと思います。DataTablesはカスタムデータオブジェクトを許可しているようです。私は次のようにロードするテーブルを取得しました：

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://api.oursite.com/api?limit=100",
        "fnServerData": function( sUrl, aoData, fnCallback, oSettings ) {
            oSettings.jqXHR = $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "jsonp",
                "cache": false
            } );
        },
        "sAjaxDataProp": "data",
        "aoColumns": [
            { "mData": "title" },
            { "mData": "description" },
            { "mData": "misc" },
        ]
    } );
});

ただし、ページング機能や並べ替え機能はいずれも機能しません。これは、DataTablesがオブジェクトに結果カウントとページング変数（「iTotalRecords」と「iTotalDisplayRecords」）を必要とするためだと思います。これは正しいです？代わりにAPI変数を使用する方法はありますか？前もって感謝します。現在、開発コンソールでエラーが発生していないため、エラーが発生している場合は、サイレントにエラーが発生しています...

4

1 に答える 1

2

データテーブルの初期化中に、ソースをAjaxsourceに直接割り当てる代わりに、aaaDataをjavascript関数に設定して、obj.dataのみを返すように操作できます。いくつかのことを手動で処理する必要があります。

     $('#tblExample').dataTable({
        "bJqueryUI": true,
        "bDestroy":true,
        "bSortable": false,
        "sAjaxSource": "",
        "aaData":GetData(),
        "aoColumns": [
                    {   
                      "sTitle":"Index","mDataProp": null, "sWidth": "20px", "sDefaultContent": "<span class='ui-icon ui-icon-circle-close' onclick='RemoveActiveItem(this);'></span>", "bSortable": false},
                    {   "mDataProp": "Year"},
                    {   "mDataProp": "Month"},
                    {   "mDataProp": "Savings"}         
        ]
    });
于 2013-01-04T20:14:02.483 に答える