価格比較サイトにｊQueryプラグインdataTables導入してみる

Prototype.jsとjQuery.jsのコンフリクト
DataTables Table plug-in for jQueryを導入
DataTables ワードプレスで動いた！

Prototype.jsとjQuery.jsのコンフリクト

前回、JavascriptやCSSを挿入する方法はできたのですが、Prototype.jsとjQuery.jsのコンフリクト（衝突）がどうしても解決できなかったので、jQueryのプラグインを使うことにしてPrototype.jsは外しました。

【WP】自作PHPスクリプト挿入時WordPressにJavascriptやCSSを追加する方法

こちらからの続きです。

最終的に、function.phpに以下のようにしてもうまく行かなかったのです。

function theme_name_scripts() {
   wp_enqueue_script('prototype', get_template_directory_uri() . '/js/prototype.js');
   wp_enqueue_script('tablekit', get_template_directory_uri() . '/js/tablekit.js');
   wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

jQueryはワードプレスのを使っているらしく調べたところjquery.jsの一番後ろにjQuery.noConflict();がある。

それでも、

このエラーがでてPrototype.jsが動いていないようなので諦めてjQueryのテーブルプラグインを使うことにしました。

今後、jQueryに統一してPrototypeは使わないようにすればなにかと不具合がおこらなそうなので結果的にこっちのほうが良さそう。

DataTables Table plug-in for jQueryを導入

DataTables Table plug-in for jQuery

まずは試しにCDNでやってみます。

//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css

//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js

DataTablesのサイトの右上にある上のURLのCSSとJS、Javascriptを入れて、とりあえず入れてテスト

目的のテーブルには、tableタグに<table id="kakakutable">といれて実験

ここでまたもやハマりました。

まずはワードプレスの推奨通りにfunction.phpにフックを作ってJavascriptを読み込ませてみます。

こんな感じでエラーがでます。

エラーの原因はJavascriptが希望の順番通りに読みこまないことにあります。

そこで、仕方なくheader.phpに入れます。

WPのjQueryはjQuery.noConflict();があるので$の関数は使えないので、

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

これを書くと

ワードプレスのjQueryを使っているため、TypeError: $ is undefinedと出るので

<script>
jQuery(document).ready(function(){
jQuery('#kakakutable').dataTable();
});
</script>

としてみました。

header.phpを以下のようにすると読み込みました・・・が、

<?php wp_head(); ?>
<?php wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php wp_enqueue_script('dataTables', '//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js'); ?>
<?php wp_enqueue_script('dataTables', '//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js'); ?>
<script>
jQuery(document).ready(function(){
$('#kakakutable').dataTable();
});
</script>

今度は・・・・

Firefoxのコンソールにこんなエラーがまだでます(TOT)

DataTables ワードプレスで動いた！

問題解決しました！TypeError: c is undefinedとエラーが出る原因は<thead>タグが無いためでした。

見出しの部分に以下のように<thead>タグを入れればソートできるようになりました！
<table id="kakakutable">
<thead>
<tr class="def">
<th width="80">ショップ</th>
<th width="134">イメージ</th>
<th width="140">商品名</th>
<th width="100" class="kakaku">価格</th>
<th width="40">ポイント</th>
<th width="45">送料</th>
</tr>
</thead>
こんな風にすれば表示されます。
ソートできるようになったのですが・・・謎の検索フォームが表示されるようになりました。
これからカスタマイズして調整すれば良さそう。
これで新しいサイトができそう。