■ はじめに
https://blogs.yahoo.co.jp/dk521123/25076367.htmlで扱ったテーブルのソート用の jQueryプラグイン「tablesorter」において、 他のサイトを見ると、テキストで扱ったものばかりで セレクトボックスを扱ったものがあまり多くなかったのでメモ。
■ サンプル
<!DOCTYPE html> <html> <head> <script src="">http://code.jquery.com/jquery.js"> <script src="./js/jquery.tablesorter.js"></script> <!-- 任意 --> <link rel="stylesheet" href="./themes/blue/style.css"> <title>Sample</title> <script type="text/javascript" > $(document).ready(function() { $("#sampleTable").tablesorter(); }); </script> </head> <body> <table id="sampleTable" cellspacing="1" class="tablesorter"> <thead>> <tr> <th>ID</th> <th>Name</th> <th>age</th> <th>date</th> <th>select box</th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>Mike</td> <td>28</td> <td>2014/01/11</td> <td> <select name="example"> <option value="01">サンプル1</option> <option value="02">サンプル2</option> <option value="03" selected>サンプル3</option> </select> </td> </tr> <tr> <td>0002</td> <td>john</td> <td>33</td> <td>2015/08/12</td> <td> <select name="example"> <option value="01" selected>サンプル1</option> <option value="02">サンプル2</option> <option value="03">サンプル3</option> </select> </td> </tr> <tr> <td>0003</td> <td>Tom</td> <td>18</td> <td>1872/02/12</td> <td> <select name="example"> <option value="01" selected>サンプル1</option> <option value="02">サンプル2</option> <option value="03">サンプル3</option> </select> </td> </tr> <tr> <td>0004</td> <td>Kevin</td> <td>45</td> <td>1962/12/11</td> <td> <select name="example"> <option value="01">サンプル1</option> <option value="02" selected>サンプル2</option> <option value="03">サンプル3</option> </select> </td> </tr> <tr> <td>0005</td> <td>Ken</td> <td>22</td> <td>2000/11/24</td> <td> <select name="example"> <option value="01" selected>サンプル1</option> <option value="02">サンプル2</option> <option value="03">サンプル3</option> </select> </td> </tr> </tbody> </table> <script> $(document).ready(function () { $("#sampleTable").tablesorter(); $.tablesorter.addParser({ id: "select", is: function () { return false; }, format: function (s, table, cell) { return $(cell).find('select').val(); }, type: "text", }); var sorter = $("#sampleTable").tablesorter({ theme: 'blue', headers: { 4: { sorter: 'select', } }, }); // ★重要★ これがないと、ユーザ選択したSelect Boxは正しくソートされない sorter.bind("sortStart", function(sorter) { $("#sampleTable").trigger("update"); }); }); </script> </body> </html>
参考文献
http://stackoverflow.com/questions/19413025/use-tablesorter-to-filter-selected-items-in-options-list-chosenサンプル
http://jsfiddle.net/hH8KM/3/
