DataTablesの表示問題 - フォーマットされていないテーブルの吹き出し

私は単純なDataTableの表示を行っていますが、スタイルの付いたDataTableが表示される前に、誰かがそれが起こっているかもしれない理由を指摘できますか？スクリプトとリンクの宣言の順序が違いますか？DataTablesの表示問題 - フォーマットされていないテーブルの吹き出し

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Demo DataTable Display</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 

     <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>  

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"> 

     <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 

     <script> 
      $(document).ready(function(){ 
       $('#example').DataTable(); 
      }); 
     </script> 


    </head> 
    <body> 
     <table id="example" class="display"> 
      <thead> 
       <tr> 
        <th>Column 1</th> 
        <th>Column 2</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Row 1 Data 1</td> 
        <td>Row 1 Data 2</td> 
       </tr> 
       <tr> 
        <td>Row 2 Data 1</td> 
        <td>Row 2 Data 2</td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

出典

2017-08-18 zzMzz

ページの下部にスクリプトを追加してみてください – Ouatataz

タグの上にあるスクリプトを移動しようとしましたが、まだ不具合が発生しています。 – zzMzz

おそらく、Aferxを使用してデータテーブルにdeferRenderオプションを有効にしてデータ型を設定しようとします。私はこれを使用して、データが間違ってロードされるので、レンダリングの問題を起こすことはありませんでした。以下実施のexempleある：

// HTML 
<table id="example"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
     </tr> 
    </tfoot> 
</table> 


// DATATABLE AJAX SCRIPT 
var table = $('#example').DataTable({ 
    ajax: { 
     url: 'your-datatable-populate-script', 
     type: 'POST', 
     data: function(d) { 

     }, 
    }, 
    deferRender: true, 
    pageLength: 10, 

    initComplete: function(settings, json) { 

    }, 
}); 

// PHP POPULATE SCRIPT 
<?php 
    $json[] = array(
     'Data 1', 
     'Data 2', 
     'Data 3', 
    ); 

    $response = array(); 
    $response['data'] = $json; 
    $response['success'] = TRUE; 

    echo json_encode($response); 
?>

参照：https://datatables.net/manual/ajax

例：

DeferRender：

デフォルトでは、DataTablesがAjaxまたはJavascriptデータソース（それぞれajaxおよびデータ）からデータを読み込むと、必要なすべてのHTML要素が作成されます。大規模なデータセットで作業する場合、特にIE6-8などの古いブラウザでは、この操作にはあまり時間がかかりません。このオプションを使用すると、DataTableは、描画に必要な場合にのみ、ノード（行のセルと表のセル）を作成できます。

例を示してみましょう。延期されたレンダリングが有効になっている場合、10,000行をすべて作成するのではなく、10,000個の行、ただしページング表示の長さが10レコードだけをロードすると、DataTablesは10エンドユーザがソート、ページ、フィルタリングを行うと、次の表示に必要な行が自動的に作成されます。これにより、ページのライフタイム全体にわたって行を作成する負荷が効果的に分散されます。

出典

2017-08-19 22:33:13 Ouatataz

DataTablesの表示問題 - フォーマットされていないテーブルの吹き出し

答えて

関連する問題