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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

5673閲覧

jquery tablesorterのソート順について

rz2319

総合スコア8

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2017/02/20 02:28

現在、PHP(fuelPHP)で、webサイトに掲載する『お知らせ』の管理用画面を作成しています。

作成したお知らせデータを一覧表示する際にテーブルを使用しており、
『更新日時』『掲載開始日時』『掲載終了日時』のそれぞれの項目で並び替えができるよう、
jqueryのtablesorterを使用しています。

【やりたいこと】
tablesorterでは、項目をクリックした際、
通常は、『昇順』→『降順』→『昇順』→『降順』・・・という順番で、
ソートがかかるものと認識しておりますが、
これを、
『降順』→『昇順』→『降順』→『昇順』と、逆順にしたいと考えております。

【やってみたこと】
読み込んでいる『jquery.tablesorter.min』のファイル内、
sortInitialOrder:"asc"という部分を"desc"に変更することによって、
最初のクリック時のみ、『降順』からのスタートを実現できました。
しかし、他の項目をクリックし、再度元の項目をクリックすると、
そこからは昇順スタートとなってしまいます。

色々なページを拝見しながら調べてみたのですが、
上記を実現できる旨の情報を見つけ出すことができず、
大変恐縮ながら、こちらの場で質問をさせて頂けたらと思います。

何卒、宜しくお願い申し上げます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

プラグインの説明をざっくり読んでみましたにゃ。

プラグインのファイルを書き換えるのではなく、
オプションで設定すればいいみたいですよ:

JavaScript

1$("table").tablesorter({ 2//最初の列を昇順でソート、3番目の列を降順でソートする 3 sortList: [[0,0],[2,1]] 4});

[テーブルの列数(最初が0), ASCなら0でDESCなら1]

ーーー本体の修正ーーー

tablesorter.js 707行に変数beforeClickHeaderを追加

JavaScript

1sortOrder, beforeClickHeader;

tablesorter.js 741行の下に追加

JavaScript

1if(beforeClickHeader && beforeClickHeader.innerHTML !== this.innerHTML ) { 2 beforeClickHeader.count = formatSortingOrder(config.sortInitialOrder); 3} 4beforeClickHeader = this;

ここののcountのインクリメントと剰余でorderのtoggleをしているんですにゃ。
保存先のthisはthなので、前にクリックされたものかどうか判別してcountを操作すればリセットできますにゃ。
これは仮にinnerHTMLで判別してますが、中が空っぽならidとかclassNameみたいな属性を使うといいですにゃ。

本体がバージョンアップされたらこのソースをその都度いれないとですから、
作者にリクエストを飛ばしてオプションで制御できるようにしてもらうといいと思いますにゃあ。

投稿2017/02/20 11:01

編集2017/02/21 02:34
nyancat

総合スコア132

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

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

rz2319

2017/02/21 00:48

早速のご回答をありがとうございます! また、返信が遅くなってしまい、大変申し訳ございません! こちらも、質問を書き込んだ後で、いろいろと試しながら、 何が問題なのかを考えておりました。 質問の書き方が悪く、大変申し訳ございません! *-----------------------------------------------------------* たとえば、A列、B列、C列がソート可能な列だったとして、 nyancat様にご教示頂きました通り、A列にオプションを設定することで、 初回表示時に、A列が降順で表示されている状態となりました。 ありがとうございます! 実は、現在課題を感じているのは、その後の挙動でございまして、 たとえば、 『今はA列の降順ソートだけど、  B列をクリックしてB列の降順のみのソートでデータを並び替えたい』という時に、 tablesorterの元々の動きだと、一回目のクリックでは「ソート無し」の状態が「昇順」に 切り替わるような動きになっています。 この部分を、質問文に記載した通り、プラグインのファイルを書き換えることで、 一回目のクリックで「ソート無し」→「降順」と切り替わるようになりました。 *-----------------------------------------------------------* ここで、 (1)A列(降順でソートされている状態)、B列、C列 となっているときに、  B列をクリックし、B列のみの降順ソートに切り替えます。  すると、 (2)A列(ソート解除)、B列(降順ソート)、C列 という状態になるかと思います。  ここで再度、A列のみの降順ソートで並び替えたい、と、A列をクリックすると、 (3)A列(昇順)、B列(ソート解除)、C列 という状態になります。  この部分が課題なんだと気がつきました。(前フリが長すぎて申し訳ありません…。) 一度、ソートが解除されたのに、 内部的に(?)ソート解除前が降順だったという情報を持っているのか、 次にクリックすると、昇順でソートされます。 同じ列を連続でクリックした際には 『降順』→『昇順』→『降順』・・・と交互に切りかわるのは勿論なのですが、 間に別の列をクリックして、ソートが解除されたのであれば、 直前のソート状態の情報もリセットされて、 再度、A列をクリックした際には降順からソートが始まって欲しい、 という部分が現状の課題でございます。 質問を書いた際に、私自身も挙動を読み取れていない部分が多く、 大変失礼を致しました! 引き続き、自身でも調べてみようと思います!
nyancat

2017/02/21 02:23 編集

toggleがデフォルトの挙動ならイベントハンドラで制御…と思ったですが、 ソースみたらヘッダーは外から操作できない仕様でしたにゃー。 本体のロジックを書き換える必要がありますにゃ。
rz2319

2017/02/21 02:38

さっそくのご確認と追加のご回答、本当にありがとうございます! 悪戦苦闘しながらコードの読解を試みるも、まだまだ力及ばずで、 本当に助かりました! ご教示頂いた内容を元に、実装を試みたいと思います!! 確かに、オプションで制御できたら本当に楽なので、リクエストも踏まえ、 まずは自身の理解も深めていきたいと思います! とても丁寧にご教示頂き、ありがとうございました!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問