DataTable AjaxSource

Question

私はここでポイントにまっすぐ行くつもりです。 私が達成しようとしているのは、ajaxを使用してテーブルを生成することです。

これは私にjquery.dataTables.min.js:39 Uncaught TypeError: Cannot read property 'length' of undefinedエラーを与えます。ここ

は私のコードです：

私のPHPコード：

public function pending_data(){ 

    $result = $this->ticketing_m->get_pending_tickets(); 
    echo json_encode($result); 

} 

jQueryの

var datatable = $("#datatable"); 

datatable.DataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": datatable.data('url') 
}); 

HTML

<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" data-url="<?php echo site_url(array("dashboard","pending_data")); ?>"> 
    <thead> 
     <tr> 
      <th>Ticket Number</th> 
      <th>Subject</th> 
      <th>From</th> 
      <th>Date Created</th> 
     </tr> 
    </thead> 
</table> 

クエリ結果

Answer 1

まず第一に、あなたはおそらくfalseにbServerSideを設定する必要があります。 trueの場合は、Server-side processingのドキュメントに記載されているように、実際にリクエストパラメータを読み取り、サーバー側の処理を行い、返品データを構造化する必要があります。あなたはここにそれらのもののどれをやっていませんので、私はあなたが単にアヤックスを使用したいと仮定していたデータをソースとし、例のhereを示すように、テーブル処理

次に、data内部テーブルデータと構造あなたのJSONを扱うのjavascriptのDataTableをしましょう＃2。あなたのJSONはこのようなものになります、また、あなたがあなたのDataTableプロパティが設定されている方法を

echo json_encode(array('data' => $result)); 

：これを実現するために

{ 
    "data": [ 
     { 
      "date_created": "2017-06-13 13:57:24", 
      "full_name": "John Doe", 
      "subject": "Test", 
      "ticket_number": "Ticket 1234" 
     }, 
     ... 
    ] 
} 

をあなたはpending_data()からの応答では、このような単純な何かをするかもしれませんここでは、非常に古いバージョンまたは古くなった構文を使用しているようです。私は、最新のバージョンをインストールし、最新のコードを使用することをお勧めします。あなたが必要とするすべてのダウンロードとサンプルを入手することができます：https://datatables.net

Answer 2

var oTable = $('#datatable').dataTable({ 
"bProcessing": true, 
"bServerSide": true, 
"sAjaxSource": "${pageContext.request.contextPath}/", 
"aoColumns" : [ 
{ "mData": "Ticket Numbe" }, 
{ "mData": "Subject" }, 
{ "mData": "From" }, 
{ "mData": "Date Created" } 
] 
}); 

私は正確なproblem.Thisが役立つかもしれません...

Answer 3

ことも使用するデータ・タイプhttps://datatables.net/examples/server_side/jsonp.html

"processing": true, 
"serverSide": true, 
"ajax": { 
      "url": "scripts/jsonp.php", 
      "dataType": "jsonp" 
     } 

Answer 4

ような何かを行います

あなたのajaxソースには4つの列があると思います。 しかしあなたは< thead>に5列あります。 無料タグ< thead>で1個のタグを削除します。

<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" data-url="<?php echo site_url(array("dashboard","pending_data")); ?>"> 
    <thead> 
     <tr> 
      <th>Ticket Number</th> 
      <th>Subject</th> 
      <th>From</th> 
      <th>Date Created</th> 
     </tr> 
    </thead> 
</table> 

Answer 5

のようにそれを使用します。

var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2'; 

    var table = $('#example').DataTable({ 
    'processing': true, 
    'serverSide': true, 
    'ajax': { 
     type: 'POST', 
     'url': url, 
     'data': function (d) { 
     console.log(d.order); 
     return JSON.stringify(d); 
     } 
    } 

    }); 

Working Fiddle