質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

ソート

複数のデータを、順序性に従って並べ替えること。 データ処理を行う際に頻繁に用いられ、多くのアルゴリズムが存在します。速度、容量、複雑さなどに違いがあり、高速性に特化したものにクイックソートがあります。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

779閲覧

インポートしたCSVをDataTableで表示させ、各列でソート可能なドロップダウンを実装したい

thgtss

総合スコア6

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

ソート

複数のデータを、順序性に従って並べ替えること。 データ処理を行う際に頻繁に用いられ、多くのアルゴリズムが存在します。速度、容量、複雑さなどに違いがあり、高速性に特化したものにクイックソートがあります。

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/03/16 12:06

編集2021/03/16 12:07

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問