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

Question

こんばんは！
よろしくお願い致します。

先日同じプラグインにてご質問させていただきましたが別途悩んでも解決しませんでしたのでご教示いただければと思います。

使用プラグイン
http://www.cyokodog.net/jquery.ex-table-filter/demo.html#!Demo7

質問内容：
参考の使用プラグインは、3つの絞込ですが、4つ目をふたしたいと思い単純にnumber-filterを増やしてjavascriptのパラメーターも増やしましたがエラーのようでテーブルの部分が消えてしまいます。
jquery.ex-table-filter.jsの中身で何かをいじれば4つ目の絞込が出来るのかお聞きしたいです。
よろしくお願い致します。

<div class="form-horizontal">
<label class="col-sm-2 control-label">No:</label>
    <div class="col-sm-4">
        <select class="number-filter form-control">
            <option></option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </div>
    <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="number">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>

$('table.data').exTableFilter({
    filters : {
        1 : 'input.class-filter',
        2 : 'select.category-filter',
        3 : 'input.qty-filter',
		4 : 'select.number-filter'
    }
});

Comments

[karamarimo]

エラーメッセージを載せてください。

Answer 1

filtersは列番号を指定するようなので、こうではないですか？

   filters : {
        0: 'select.number-filter',
        1: 'input.class-filter',
        2: 'select.category-filter',
        3: 'input.qty-filter'
    }

Answer 2

karamarimoさんの方法で解決しました。
テーブルの場合0番から指定する必要がありました。
無事解決出来て助かりました。
ありがとうございました。

<script>
$(function(){
    $('table.data').exTableFilter({
        filters : {
        0: 'select.number-filter',
        1: 'input.class-filter',
        2: 'select.category-filter',
        3: 'input.qty-filter'
    }
    });
});
</script>