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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

2回答

5889閲覧

jQuery DataTablesのソートが反映されない

Futeki_gou

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2019/02/22 19:54

##問題
ソートの矢印はでるのですが押してもソートされません
サーバー連携で取得したデータには適応されないのでしょうか

js

1 var table = $('#vacancy-list').dataTable({ 2 // BOMでヘッダ/フッタのレイアウトを定義します 3 "dom" : "ipt", 4 // destroyを指定します 5 "destroy" : false, 6 // 処理中を表示します 7 "processing" : false, 8 // サーバー通信を行います 9 "serverSide" : true, 10 // ページング形式を指定します 11 "pagingType" : "simple_numbers", 12 // 開始位置のデフォルト値を指定します 13 "displayStart" : 0, 14 // ソートの使用有無を指定します 15 "ordering" : true, 16 "select": true, 17 "paging" : false, 18 "info" : false, 19 // 処理中ウィンドウの使用有無を指定します 20 "processing" : false, 21 // ajaxの設定を行います 22 "ajax" : { 23 // サーバリクエスト時のパラメータを設定します 24 "type" : "POST", 25 "contentType" : "application/json", 26 "url" : '/adupt/data/', 27 "data" : function(reqData) { 28 reqData['referenceType'] = '01'; 29 reqData['userCount'] = '3'; 30 return JSON.stringify(reqData); 31 }, 32 // サーバからのレスポンスが設定されます 33 "dataSrc" : function(resJson) { 34 console.log("成功"); 35 36 if (resJson.statusCode == 'S0000') { 37 38 $("#vacancy-list").show(); 39 return resJson.resultConvertData; 40 } else { 41 console.log("失敗"); 42 } 43 }, 44 // サーバからのエラーがレスポンスされた際の処理です 45 "error" : function(json) { 46 var data = { 47 "data" : [] 48 }; 49 console.log("エラー"); 50 return data; 51 } 52 }, 53 54 // カラムの表示指定を行います 55 "columns" : [ { 56 data : 'room_id' 57 }, { 58 data : 'room_capacity' 59 }, { 60 data : 'model_id' 61 }, ] 62 63 }); 64}); 65

html

1<table id="vacancy-list" style="display: none; width: 100%"> 2 <thead> 3 <tr> 4 <th>部屋番号</th> 5 <th>許容人数</th> 6 <th>機種</th> 7 </tr> 8 </thead> 9</table>

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

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

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

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

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

cerfweb

2019/02/22 21:27

ソートされないのはどのカラムで、実際にどのようなhtmlが入っていますか。
Futeki_gou

2019/02/23 10:23

部屋番号,許容人数,機種全てでソートされません。 実際に入っている値はajaxでサーバー連携し取得してきた値がテーブルに表示されるようになってます。 入ってるデータは以下通りです "resultConvertData":[{"room_id":"102","room_capacity":"5","model_id":"JOY SOUND MAX"}, {"room_id":"103","room_capacity":"5","model_id":"JOY SOUND f1"}, {"room_id":"105","room_capacity":"5","model_id":"LIVEDAM GOLD EDITION"}, {"room_id":"106","room_capacity":"5","model_id":"M04"}, {"room_id":"107","room_capacity":"10","model_id":"JOY SOUND MAX"}, {"room_id":"108","room_capacity":"10","model_id":"JOY SOUND f1"}, {"room_id":"109","room_capacity":"10","model_id":"LIVEDAM GOLD EDITION"}, {"room_id":"110","room_capacity":"30","model_id":"M04"}, {"room_id":"201","room_capacity":"10","model_id":"M04"}, {"room_id":"202","room_capacity":"10","model_id":"JOY SOUND MAX"}, {"room_id":"203","room_capacity":"10","model_id":"JOY SOUND f1"}, {"room_id":"204","room_capacity":"50","model_id":"LIVEDAM GOLD EDITION"}, {"room_id":"205","room_capacity":"100","model_id":"M04"]}
cerfweb

2019/02/23 10:27

テーブルの行にどのようなhtmlが生成されているか確認できますか?
cerfweb

2019/02/23 11:37

データの最後の部分が]}で終わっていますが、}]の間違いではありませんか?
guest

回答2

0

自己解決

ソートするごとにapiをよんでsql投げることにしました。
ありがとうございます。

投稿2019/03/03 14:17

Futeki_gou

総合スコア14

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

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

0

dataTableに限らない話ですが、
プラグインの設定、宣言をした場合、その設定や宣言をした時点でのhtmlに対して処理が行われるのが通例です。

コードを見た感じだと、データを入れ込む前に設定や宣言を行っているために現在の問題が起きていると思って間違いないと思います。
※あくまで固定でhtmlを入れてるときに正常動作していることは前提です

データを入れ込んだあとに設定や宣言をするように処理順序を変えてください。

つまり、今後、例えば検索結果を反映されるような処理に変更した場合、データを入れ込み都度、指定をする必要があるということになります。
プラグインによっては一度解除する必要があるかもしれないので、そこはプラグインのマニュアルを確認して調整してください。

投稿2019/02/22 20:57

編集2019/02/23 00:28
m.ts10806

総合スコア80850

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問