dataTableの使用にはどのファイルが必要ですか？

Question

dataTableの使用にはどのファイルが必要ですか？

DataTableを初期化しようとしましたが、できません。


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>

何が間違っていますか？
テーブルの構造は必要ですか？
データが必要ですか？

  <table id = "example">
    <thead>
       <tr>
           第1列1
       </tr>
    </thead>
    <tbody>
        <tr>
            <td> data </td>
        </tr>
    </tbody>
</table>

4

追加された 06 2月 2012 〜で 02:17 著者 Spirit 編集された 06 2月 2012 〜で 03:40

ビュー: 4

源

ru fr es pt de ar

あなたの1行の「データ」は十分なダミーデータです。あなたは、リソースを要求するdataTable関数にパラメータを渡さない限り、サーバ側のデータソースまたはそのようなものを持つ必要はありません。

追加された 06 2月 2012 〜で 07:16, 著者 Greg Pettit, 源

HTMLテーブルを投稿してください

追加された 06 2月 2012 〜で 02:21, 著者 472084, 源

私が確認しておきます、チェックします。ありがとう。

追加された 06 2月 2012 〜で 02:24, 著者 Spirit, 源

ヘッダーファイルが漏れているようです。私は彼らのヘッダーを私のものに作り直す。結果は[それは前に働いた]それは[変更後に動作しません]。

追加された 06 2月 2012 〜で 03:16, 著者 Spirit, 源

4 答え

初期化に必要なファイルは2つだけです。

jQuery（しかし、それを含めたい）。続いて
jquery.dataTables.js（またはミニバージョン）

あなたのテーブルは適切なCSSなしで狂ったように見えます（並べ替えアイコンを容易にするためにさまざまなスパンが追加されています）が、必要ではありません。彼らはただのスタイルです。

これらの2つのファイルと、 $（ '＃myTable'）.dataTable（）コール（ドキュメント準備機能で）で初期化されていない場合は、別のことが行われています。 JavaScriptコンソールを使用して、発生しているエラーを確認します。

Here it is in their jsbin environment: http://live.datatables.net/olofeg

CSSなし、2つのJSファイル、整形式の表、ドキュメント準備関数からの dataTable（）の呼び出し。

4

追加された 06 2月 2012 〜で 07:23 著者 Greg Pettit

源

著者 Nicola Peluchetti · Answer 1 · 2012-02-06T02:28Z

To use datatable you have a lot of choices, one possibility is to have a well formed (with <thead> and <tbody>) HTML table to "transform"


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<table id="example">
   <thead>
       <tr>
           <th>Column 1</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
//initialize datatables
    (function($){
       $('#example').dataTable();
    });
 </script>

3

追加された 06 2月 2012 〜で 02:28 著者 Nicola Peluchetti

源

@Antonもちろん、このコードでは、ファイルが同じフォルダ（demo_table.css、demo_page.css、jquery.dataTables.js、jquery.js、およびhtmlファイル）にあることが必要です。

追加された 06 2月 2012 〜で 03:24, 著者 Nicola Peluchetti, 源

@Antonもちろん構造に従わなければなりません。構造は @import と src 属性に反映されなければなりません

追加された 06 2月 2012 〜で 03:39, 著者 Nicola Peluchetti, 源

@Antonこれら4つのファイルは、dataTablesを実行するのに十分です

追加された 06 2月 2012 〜で 04:41, 著者 Nicola Peluchetti, 源

いいえ、head、body、doctypeタグを追加しても機能しません。

追加された 06 2月 2012 〜で 02:45, 著者 Spirit, 源

おそらくそれはフォルダ構造に依存します。

追加された 06 2月 2012 〜で 02:48, 著者 Spirit, 源

しかし、これらのファイルだけではありません。 :)私はおそらく私たちは "彼らの"フォルダ構造に従わなければならないかわからないものです。

追加された 06 2月 2012 〜で 03:30, 著者 Spirit, 源

私は、demo_page.css、demo_table.css、jquery.js、jquery.dataTables.jsは、DataTableの初期化には不十分であることを意味します。

追加された 06 2月 2012 〜で 03:44, 著者 Spirit, 源

著者 Mahfud Harun · Answer 2 · 2012-02-06T03:06Z

あなたはjavascriptでdataTable関数を呼び出す必要があります

<script type="text/javascript">
    $(document).ready(function(){
        $("example").dataTable();
    });
</script>

著者 Joby Job · Answer 3 · 2016-08-02T06:28Z

私は一日中研究しました。おそらくjQueryは大規模な人の数、しかし私は 'シングル'のブログを見つけることができませんでしたあなたのhtml/jspにインポートされるすべての "最小限の"もの jQueryのdatatable機能を利用しています... これを小さなhtmlページに以下のようにコンパイルします（これは完全です働いているものなので、ここから始めて、あなたの方法で構築してください。）



<head>		
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
	   
	<script type="text/javascript">
		$(document).ready(function() {
			$("#companies").dataTable({
				"sPaginationType": "full_numbers",
				"bJQueryUI": true
			});
		});
	</script>
</head>
	
    <body id="dt_example">
        <div id="container">
            <div id="demo_jui">
                <table id="companies" class="display">
                    <thead>
                        <tr>
                            <th>Company name</th>
                            <th>Address</th>
                            <th>Town</th>
                        </tr>
                    </thead>
                    <tbody>
						<tr>
							<th>Atlassian</th>
							<th>Paramatta</th>
							<th>Sydney</th>
						</tr>
						<tr>
							<th>Oracle</th>
							<th>Whitefield</th>
							<th>India</th>
						</tr>
                    </tbody>
                </table>
         </div>
        </div> 
    </body>
</html>

</div> </div>