2017-07-17 5 views
1

Ajaxを使用してjQuery DataTableにデータを取り込むことができます。しかしその後、jQuery DataTablesの検索、並べ替え、ページ設定が機能しなくなりました。助けてください。ここでjQuery DataTablesの検索、並べ替え、ページ番号付けは、ajaxデータでは機能しません。

は私のHTMLコードです:

以下
<table id="account-details-result-table" 
    class="table table-bordered text-center css-fonts-calibri"> 
    <thead> 
     <tr> 
      <th>Organization Id</th> 
      <th>Organization Name</th> 
      <th>Parent OpCo Name</th> 
      <th>Registered Email Id</th> 
      <th>Registered Phone Number</th> 
     </tr> 
    </thead> 
    <tbody id="search-results-table-tbody"> 
     <!-- append data here --> 
    </tbody> 
</table> 

は、検索結果のjQueryのDataTableのを初期化する機能です。私は$(ドキュメント).ready()内にそれを呼び出す」:あなたは成功したAJAX呼び出した後のDataTableをリコールする必要がある。この問題については

function sendSearchAccountDetailsRequest(orgQueryReqJSONString){ 

    $.ajax({ 
      type : 'POST', 
      url : ctx+'/SearchController', 
      data: orgQueryReqJSONString, 
      contentType: 'application/json',                    
      success : function(response) {     
      //process JSON response here     
      var counter = 0; 
      var tableDataHTML = ''; 

      $.each(response.organizationDetailsList, function(counter){ 
       var $curr = response.organizationDetailsList[counter].organizationDetails; 
       tableDataHTML += '<tr id="searched-row-'+counter+'" class="js-result-tbl-tbody-tr">'+ 
           '<td>'+$curr.organizationID+'</td>'+ 
           '<td>'+$curr.organizationName+'</td>'+ 
           '<td>'+$curr.parentOpCoName+'</td>'+ 
           '<td>'+$curr.registeredEmailID+'</td>'+ 
           '<td>'+$curr.registeredPhoneNo+'</td>'+ 
           '</tr>';    
       }); 

      $('#search-results-table-tbody').empty(); 
      $('#search-results-table-tbody').append(tableDataHTML); 
      }, 
      error : function(response) {     
      //handle errors here 
      alert('Error !!!'+response);    
      } 
    }); 
} 
+0

function sendSearchAccountDetailsRequest(orgQueryReqJSONString){ $.ajax({ type : 'POST', url : ctx+'/SearchController', data: orgQueryReqJSONString, contentType: 'application/json', success : function(response) { //process JSON response here var counter = 0; var tableDataHTML = ''; $.each(response.organizationDetailsList, function(counter){ var $curr = response.organizationDetailsList[counter].organizationDetails; tableDataHTML += '<tr id="searched-row-'+counter+'" class="js-result-tbl-tbody-tr">'+ '<td>'+$curr.organizationID+'</td>'+ '<td>'+$curr.organizationName+'</td>'+ '<td>'+$curr.parentOpCoName+'</td>'+ '<td>'+$curr.registeredEmailID+'</td>'+ '<td>'+$curr.registeredPhoneNo+'</td>'+ '</tr>'; }); $('#search-results-table-tbody').empty(); $('#search-results-table-tbody').append(tableDataHTML); initResultDataTable(); }, error : function(response) { //handle errors here alert('Error !!!'+response); } });} 
のDataTable独自[AJAXオプション](https://datatables.net/manual/ajax)を有しています。 – Shiffty

+0

@Shiffty、私はその部分について知っています。しかし、私は上記のアプローチだけに従わなければならない。 –

+0

私はあなたがこれをやっていると仮定しているので、サーバー側のデータを読み込むことができますが、クライアント側のページングや並べ替えなどを使用できますか?だから、テーブルは正常に移植されますが、データテーブルの機能は動作していませんか? – markpsmith

答えて

1

function initResultDataTable(){ 
    $('#account-details-result-table').DataTable({ 
         "order": [], 
         "columnDefs": [ { 
         "targets" : 'no-sort', 
         "orderable": false, 
         }] 
       }); 
} 

そして、ここでは私のAJAX呼び出しです。

+0

。initResultDataTable()を呼び出すと、呼び出すことができないという警告が表示されます。私はそれを動作させるためにトリックを演奏しなければならなかった。私は<\t \t \t \t \t \t $(ドキュメント).ready(からの呼び出しを削除)し、成功したAJAX後にそれを呼ばれるとhtmlの変化 を作りました! - - 行下に除去し、ここにデータを追加 - > \t \t \t \t \t \t \t \t \t \t \t \t \t 表のデータなし。 \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t –

+0

あなたは $( '#アカウントの詳細結果テーブル')を適用することができます。DataTableの({ "順序" :[]、 "columnDefs":[{ "targets": 'no-sort'、 "orderable":false、 }] }); このコードは、関数を呼び出す代わりに正常なajax呼び出しの直後に発生します。 –

+0

問題は同じままです。私は解決策に達しました。私は再初期化できるようにDataTableインスタンスをdestroするためにinitResultDataTable()を呼び出す前にdestroy()メソッドを使用しました。 var table = $( '#account-details-result-table')。DataTable(); table.destroy(); –

関連する問題