2016-09-11 7 views
1

イブニングすべて、難し私はしかし、私はそれがすべてで動作させることはできません私のウェブサイトに「のDataTable」jQueryのスクリプトを追加しようとしていますjQueryのDataTableの

を実装!

最新のjQueryプロダクションをダウンロードして、私が使用しようとしているページと同じフォルダに置く必要があります。例えばファイルには、私はその後、私は、この私の後

次のコードでは、「jQueryのリンク」のコメントを参照してください使用していたファイルのヘッダにこれを含める必要がありますページ> jqueryの-3.1.0.min.jsに

です例えば、https://datatables.net/download/のように、ビルダーからデータテーブルをダウンロードする必要があります。サイトは内部使用のみのため、ローカルのファイルを選択しましたので、リソースにオンラインでアクセスする必要はありません。だから今、私のフォルダ構造は、ページのように見える>のDataTable> ...

だから今、私は「jQueryのCSS」と「jQueryのJS」

以下のコード内のコメントを参照してくださいだけでなく、ヘッダにJSとCSSを追加次に、データテーブルの必要に応じてテーブルを描画します。「テーブル開始」「テーブル終了」のコメントを参照してください。

JSに「コールスクリプトの開始」「コールスクリプトの終了」のコメントを参照してください。

私はこのページを実行すると、テーブル上に全くフォーマットがありません。

私は何か非常に簡単に行方不明だと確信しています!

<!DOCTYPE html> 
<head> 
    <!-- jQuery Link --> 
    <script src="jquery-3.1.0.min.js"></script> 

    <!--jQuery CSS --> 
    <link rel="stylesheet" type="text/css" href="/DataTables/datatables.css"> 

    <!--jQuery JS --> 
    <script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script> 
</head> 
<body> 

<!-- Table start --> 
<table id="table_id" 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> 
<!-- Table end --> 

<!-- Call script start --> 
<script> 
$(document).ready(function() { 

$('#table_id').DataTable() 

}); 
</script> 
<!-- Call script end --> 
</body> 

</html> 
+0

$( '#table_id')を試してください。DataTable() ' – skobaljic

+0

これを今修正しました。私はそれのように書かれていたことを実現!でも、とにかく同じ結果がページに書式設定されていないのですか? – bepster

+2

あなたのコードは動作するようです:https://jsfiddle.net/ohy2xtud/ コンソール出力はありますか?あなたのスクリプトやスタイルシートなどの問題があるかもしれません。あなたは/ DataTables/datatablesは確かですか?jsはあなたのスクリプトファイルを参照する正しい方法です(cssと同じです)? jQueryのようにプロジェクトのディレクトリではなく、Webルートディレクトリを参照してください –

答えて

1

あなたのコードが動作するようです:http://jsfiddle.net/ohy2xtud/を任意のコンソール出力がありますか?あなたのスクリプトやスタイルシートなどの問題があるかもしれません。 /DataTables/datatables.jsがあなたのスクリプトファイルを参照する正しい方法です(CSSと同じですか?) jQueryファイルの場合と同様に、プロジェクトのディレクトリではなく、WebルートディレクトリのDataTablesフォルダを調べます。

私はリモートであなたのリンクを含めるしようとする:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css

https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js

動作する必要があること。それがうまくいくなら、あなたはまだそれをダウンロードすることができます。ローカルファイルを提供するには、プロジェクトの正確な構造を教えてください。すべてのスクリプトとスタイルシートはHTMLファイルと同じディレクトリにありますか?また、datatables.netから生成されたファイルの代わりにローカルでCDNのバージョンを使用することもできます

+0

おかげさまで感謝申し上げます!あなたは/DataTables/datatables.jsがファイルを参照する間違った方法であると言っていました。ルートにダウンロードされたファイルを直接ダウンロードし、それらに直接リンクして、完璧に動作しました! – bepster

+0

あなたは大歓迎です!私は助けることができてうれしいです。 –

0

他のブートストラップ3を使用した場合は、独自のスタイルを提供する必要がありますテーブルタグにtableクラスを追加します。ブートストラップをインポートし、クラスを追加するには、このようにリンクタグを追加しよう:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
+0

私は幸運の歓声でこの行を追加しようとしました。また、私はサイトを内部のスタッフのためだけであり、すべてのことがローカルディレクトリに保存されていると理解しているので、ローカルサーバーにすべてを保存しようとしていますか? – bepster

+0

はい、サーバーにブートストラップをダウンロードできます。 –

関連する問題