価格比較サイトに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' );

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

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

それでも、

TypeError: element.dispatchEvent is not a function

このエラーがでて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に入れる jQuery エラー

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

jQuery エラー

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

Javascriptが希望の順番通りに読みこまない。

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

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

 

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

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

これを書くと

TypeError: $ is undefined

ワードプレスの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>

今度は・・・・

TypeError: c is undefined

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>
こんな風にすれば表示されます。
dataTables 謎のフォームソートできるようになったのですが・・・謎の検索フォームが表示されるようになりました。
これからカスタマイズして調整すれば良さそう。
これで新しいサイトができそう。

今日はここまで、解決してよかった!

 

コメント

タイトルとURLをコピーしました