前提・実現したいこと
jquery.csv.jsでCSVをインポートし、jQuery DataTablesで表組みを作成しています。
表の各列でソート可能なドロップダウンを実装したいのですが、ドロップダウンが出ません。
⇒ こんな感じのもの https://plnkr.co/edit/MJgKWrYpFmmr0v43hKd4?p=preview&preview
原因が分かる方いらっしゃいますでしょうか?
html
1$(document).ready(function() { 2 $.when( 3 $.ajax({ 4 url: 'list.csv', 5 cache: false, 6 dataType: "text", 7 beforeSend : function(xhr) { 8 xhr.overrideMimeType('text/plain;charset=UTF-8'); 9 }, 10 }) 11 ) 12 .done(function(data) { 13 data=$.csv()(data); 14 console.info(data) 15 $.extend($.fn.dataTable.defaults, { 16 language: { 17 url: "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" 18 } 19 }); 20 $('#list').DataTable({ 21 data:data, 22 scrollX: true, 23 autowidth: false, 24 columnDefs: [ 25 { "type": "natural", targets: 1 }, 26 { "type": "natural", targets: 2 } 27 ] 28 }); 29 30 $('#example tfoot th').each(function () { 31 var title = $(this).text(); 32 if (title != '') { 33 $(this).html('<input type="text" size="1" />'); 34 } 35 }); 36 37 $('#example tfoot tr').appendTo('#example thead'); 38 39 table.columns().every(function () { 40 var column = this; 41 var select = $('<select><option value=""></option></select>') 42 .appendTo($(column.footer()).empty()) 43 .on('change', function () { 44 var val = $.fn.dataTable.util.escapeRegex( 45 $(this).val() 46 ); 47 column 48 .search(val ? '^' + val + '$' : '', true, false) 49 .draw(); 50 }); 51 column.order('asc').draw(false).data().unique().each(function (value, j) { 52 select.append('<option value="' + value + '">' + value + '</option>') 53 }); 54 }); 55 56} );
html
1 <table id="example" width="50%"> 2 <thead> 3 <tr> 4 <th>ID</th> 5 <th>ITEM</th> 6 </tr> 7 </thead> 8 <tfoot> 9 <tr> 10 <th>ID</th> 11 <th>ITEM</th> 12 </tr> 13 </tfoot> 14 <tbody> 15 </tbody> 16 </table>
あなたの回答
tips
プレビュー