</script> <script type="text/javascript""> </script> <script type="text/javascript""> </script> <script type="text/javascript"" />

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

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


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
  1. 何が間違っていますか?

  2. テーブルの構造は必要ですか?

  3. データが必要ですか?

  <table id = "example">
    <thead>
       <tr>
           第1列1
       </tr>
    </thead>
    <tbody>
        <tr>
            <td> data </td>
        </tr>
    </tbody>
</table>
 
4
あなたの1行の「データ」は十分なダミーデータです。あなたは、リソースを要求するdataTable関数にパラメータを渡さない限り、サーバ側のデータソースまたはそのようなものを持つ必要はありません。
追加された 著者 Greg Pettit,
HTMLテーブルを投稿してください
追加された 著者 472084,
私が確認しておきます、チェックします。ありがとう。
追加された 著者 Spirit,
ヘッダーファイルが漏れているようです。私は彼らのヘッダーを私のものに作り直す。結果は[それは前に働いた]それは[変更後に動作しません]。
追加された 著者 Spirit,

4 答え

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

  1. jQuery(しかし、それを含めたい)。続いて
  2. 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
追加された

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
追加された
@Antonもちろん、このコードでは、ファイルが同じフォルダ(demo_table.css、demo_page.css、jquery.dataTables.js、jquery.js、およびhtmlファイル)にあることが必要です。
追加された 著者 Nicola Peluchetti,
@Antonもちろん構造に従わなければなりません。構造は @import src 属性に反映されなければなりません
追加された 著者 Nicola Peluchetti,
@Antonこれら4つのファイルは、dataTablesを実行するのに十分です
追加された 著者 Nicola Peluchetti,
いいえ、head、body、doctypeタグを追加しても機能しません。
追加された 著者 Spirit,
おそらくそれはフォルダ構造に依存します。
追加された 著者 Spirit,
しかし、これらのファイルだけではありません。 :)私はおそらく私たちは "彼らの"フォルダ構造に従わなければならないかわからないものです。
追加された 著者 Spirit,
私は、demo_page.css、demo_table.css、jquery.js、jquery.dataTables.jsは、DataTableの初期化には不十分であることを意味します。
追加された 著者 Spirit,

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

<script type="text/javascript">
    $(document).ready(function(){
        $("example").dataTable();
    });
</script>
1
追加された

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">



<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>

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript