テーブルフィルタリング　jQuery プラグイン　技術的相談

初めまして、ページ内でテーブルの中身をフィルタリングしたいと思っております。

参考サイト
http://www.cyokodog.net/jquery.ex-table-filter/demo.html#!Demo7

当方で書いたサンプルを以下に記載致します。
特に間違ってはいないようですが何かが足りないようで動きません。
2日間もハマってしまっております。。
大変お手数をおかけ致しますがご教示願いします。

以下
当方ソース

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js"></script>
</head>
<body>
<div class="form-horizontal">
    <label class="col-sm-1 control-label">CLASS:</label>
    <div class="col-sm-2">
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value=""/>all</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="core"/>core</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="ui"/>ui</label>
        </div>
    </div>
    <label class="col-sm-2 control-label">CATEGORY:</label>
    <div class="col-sm-4">
        <select class="category-filter form-control">
            <option></option>
            <option>Events</option>
            <option>Metaplugin</option>
            <option>Utilities</option>
        </select>
    </div>
    <label class="col-sm-1 control-label">QTY:</label>
    <div class="col-sm-2">
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="26"/>26</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="130"/>130</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="327"/>327</label>
        </div>
    </div>
</div>
<table class="table data">
    <thead>
        <tr>
            <th class="no">No</th>
            <th class="class">CLASS</th>
            <th class="category">CATEGORY</th>
            <th class="qty num">QTY</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>core</td>    <td>Ajax</td><td class="num">203</td></tr>
        <tr><td>2</td><td>core</td>    <td>Animation and Effects</td><td class="num">292</td></tr>
        <tr><td>3</td><td>core</td>    <td>Browser Tweaks</td><td class="num">78</td></tr>
        <tr><td>4</td><td>core</td>    <td>Data</td><td class="num">139</td></tr>
        <tr><td>5</td><td>core</td>    <td>DOM</td><td class="num">141</td></tr>
        <tr><td>6</td><td>ui</td>     <td>Widgets</td><td class="num">242</td></tr>
        <tr><td>7</td><td>core</td>    <td>Events</td><td class="num">130</td></tr>
        <tr><td>8</td><td>ui</td>      <td>Forms</td><td class="num">362</td></tr>
        <tr><td>9</td><td>core</td>    <td>Integration</td><td class="num">102</td></tr>
        <tr><td>10</td><td>core</td>   <td>JavaScript</td><td class="num">148</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>11</td><td>core</td>   <td>jQuery Extensions</td><td class="num">219</td></tr>
        <tr><td>12</td><td>ui</td>     <td>Layout</td><td class="num">183</td></tr>
        <tr><td>13</td><td>ui</td>     <td>Media</td><td class="num">129</td></tr>
        <tr><td>14</td><td>ui</td>     <td>Menus</td><td class="num">92</td></tr>
        <tr><td>15</td><td>core</td>   <td>Metaplugin</td><td class="num">22</td></tr>
        <tr><td>16</td><td>ui</td>     <td>Navigation</td><td class="num">148</td></tr>
        <tr><td>17</td><td>ui</td>     <td>Tables</td><td class="num">74</td></tr>
        <tr><td>18</td><td>ui</td>     <td>User Interface</td><td class="num">644</td></tr>
        <tr><td>19</td><td>core</td>   <td>Utilities</td><td class="num">322</td></tr>
        <tr><td>20</td><td>ui</td>      <td>Drag-and-Drop</td><td class="num">32</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>21</td><td>ui</td>     <td>Windows and Overlays</td><td class="num">102</td></tr>
    </tbody>    
    <tfoot>
        <tr>
            <th colspan="3"/>
            <th id="sum" class="num"> </th>
        </tr>
    </tfoot>
</table>
<script>
$(function(){
    $('table.data').exTableFilter({
        filters : {
            1 : 'input.class-filter',
            2 : 'select.category-filter',
            3 : 'input.qty-filter'
        }
    });
});
</script>
</body>
</html>

yuki-saito

2017/10/25 07:41

コードは```で囲っていただけますか？そうすればインデントがキレイに見えますので・・・

isseidayo

2017/10/25 07:44

初心者で大変失礼致しました。

yuki-saito

2017/10/25 07:54

いえいえ、ほぼサイトの内容って感じなんですね！既に回答してくださっている方がいらっしゃるようなのでよかったです。

isseidayo

2017/10/25 08:16

とりあえずサイトの内容でテストしてからと思っていて最初からつまづきました。。

kimurayu

2017/10/25 08:32

コンソールにエラーメッセージ出ますか？

行動規範の内容に同意します

回答5件

html
1<script src="https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js"></script>

これが原因です。

Refused to execute script from 'https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

というエラーがコンソールに出るはずです。
https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.js
にアクセスしてjsをコピーしてローカル jquery.ex-table-filter.jsを置くかscript タグに直接記述してください。そうすると動きます。

投稿2017/10/25 08:41

編集2017/10/25 08:42

kimurayu

総合スコア158

isseidayo

2017/10/25 08:45

ありがとうございます！ローカルにjquery.ex-table-filter.jsを持ってきたら動きました。

行動規範の内容に同意します

ベストアンサー

srcの読み込みがhttpとhttpsが混じってて読み込めていないのでは
https://github.com/cyokodog/jquery.ex-table-filter
からダウンロードしてダウンロードしたファイルから読み込むようにしてみて下さい

投稿2017/10/25 08:25

date

総合スコア1820

isseidayo

2017/10/25 08:45

ありがとうございました。解決致しました。

行動規範の内容に同意します

実行時点でtable.dataがまだ存在していないので、<script>をtableの後ろに移動してください。

-- 追記。
見てみると、text/plainで返ってきているので、直接https://raw.githubusercontent.com/cyokodog/jquery.ex-table-filter/gh-pages/jquery.ex-table-filter.jsを参照するのではなく、ダウンロードして使ってみてください。

投稿2017/10/25 07:50

編集2017/10/25 08:56

x_x

総合スコア13749

isseidayo

2017/10/25 08:15

質問ソースも変更しました。<script>をtableの後ろに持って行きましたが動きませんでした。

行動規範の内容に同意します

DOMのロードを待ってみては。

JavaScript
1$(function(){
2    $('table.data').exTableFilter({
3        filters : {
4            1 : 'input.class-filter',
5            2 : 'select.category-filter',
6            3 : 'input.qty-filter'
7        }
8    });
9});

投稿2017/10/25 07:50

kei344

総合スコア69400

isseidayo

2017/10/25 08:12

こちらの方法では解決致しませんでした。

行動規範の内容に同意します

沢山回答をいただきまして解決致しました。

httpとhttpsの混在と最初はtable.dataがまだ存在していないので、<script>をtableの後ろに移動を行いました。
本サイトがhttpsでしたのでjquery.min.jsはhttpsのCDN仕様とjquery.ex-table-filter.jsはローカルに持って持ってきました

皆様本当にありがとうございました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.ex-table-filter.js"></script>
</head>
<body>
<div class="form-horizontal">
    <label class="col-sm-1 control-label">CLASS:</label>
    <div class="col-sm-2">
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value=""/>all</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="core"/>core</label>
        </div>
        <div class="radio">
            <label><input type="radio" class="class-filter" name="class-filter" value="ui"/>ui</label>
        </div>
    </div>
    <label class="col-sm-2 control-label">CATEGORY:</label>
    <div class="col-sm-4">
        <select class="category-filter form-control">
            <option></option>
            <option>Events</option>
            <option>Metaplugin</option>
            <option>Utilities</option>
        </select>
    </div>
    <label class="col-sm-1 control-label">QTY:</label>
    <div class="col-sm-2">
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="26"/>26</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="130"/>130</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" class="qty-filter" value="327"/>327</label>
        </div>
    </div>
</div>
<table class="table data">
    <thead>
        <tr>
            <th class="no">No</th>
            <th class="class">CLASS</th>
            <th class="category">CATEGORY</th>
            <th class="qty num">QTY</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>core</td>    <td>Ajax</td><td class="num">203</td></tr>
        <tr><td>2</td><td>core</td>    <td>Animation and Effects</td><td class="num">292</td></tr>
        <tr><td>3</td><td>core</td>    <td>Browser Tweaks</td><td class="num">78</td></tr>
        <tr><td>4</td><td>core</td>    <td>Data</td><td class="num">139</td></tr>
        <tr><td>5</td><td>core</td>    <td>DOM</td><td class="num">141</td></tr>
        <tr><td>6</td><td>ui</td>     <td>Widgets</td><td class="num">242</td></tr>
        <tr><td>7</td><td>core</td>    <td>Events</td><td class="num">130</td></tr>
        <tr><td>8</td><td>ui</td>      <td>Forms</td><td class="num">362</td></tr>
        <tr><td>9</td><td>core</td>    <td>Integration</td><td class="num">102</td></tr>
        <tr><td>10</td><td>core</td>   <td>JavaScript</td><td class="num">148</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>11</td><td>core</td>   <td>jQuery Extensions</td><td class="num">219</td></tr>
        <tr><td>12</td><td>ui</td>     <td>Layout</td><td class="num">183</td></tr>
        <tr><td>13</td><td>ui</td>     <td>Media</td><td class="num">129</td></tr>
        <tr><td>14</td><td>ui</td>     <td>Menus</td><td class="num">92</td></tr>
        <tr><td>15</td><td>core</td>   <td>Metaplugin</td><td class="num">22</td></tr>
        <tr><td>16</td><td>ui</td>     <td>Navigation</td><td class="num">148</td></tr>
        <tr><td>17</td><td>ui</td>     <td>Tables</td><td class="num">74</td></tr>
        <tr><td>18</td><td>ui</td>     <td>User Interface</td><td class="num">644</td></tr>
        <tr><td>19</td><td>core</td>   <td>Utilities</td><td class="num">322</td></tr>
        <tr><td>20</td><td>ui</td>      <td>Drag-and-Drop</td><td class="num">32</td></tr>
        <tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
        <tr><td>21</td><td>ui</td>     <td>Windows and Overlays</td><td class="num">102</td></tr>
    </tbody>    
    <tfoot>
        <tr>
            <th colspan="3"/>
            <th id="sum" class="num"> </th>
        </tr>
    </tfoot>
</table>
<script>
$(function(){
    $('table.data').exTableFilter({
        filters : {
            1 : 'input.class-filter',
            2 : 'select.category-filter',
            3 : 'input.qty-filter'
        }
    });
});
</script>
</body>
</html>

投稿2017/10/25 08:41

isseidayo

総合スコア12