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

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

ただいまの
回答率

90.52%

  • PHP

    20330questions

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

  • jQueryプラグイン

    500questions

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

jquery tablesorterのソート順について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,254

rz2319

score 2

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

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

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

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

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

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

ーーー本体の修正ーーー

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

sortOrder, beforeClickHeader;

tablesorter.js 741行の下に追加

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


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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/21 09: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列をクリックした際には降順からソートが始まって欲しい、
    という部分が現状の課題でございます。

    質問を書いた際に、私自身も挙動を読み取れていない部分が多く、
    大変失礼を致しました!
    引き続き、自身でも調べてみようと思います!

    キャンセル

  • 2017/02/21 10:08 編集

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

    キャンセル

  • 2017/02/21 11:38

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

    とても丁寧にご教示頂き、ありがとうございました!!!

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20330questions

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

  • jQueryプラグイン

    500questions

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