「java script」データソートページ送りが可能なテーブル

このQ&Aのポイント
  • データをソートできるテーブルを作成するためのjava scriptのソースコードです。
  • 一つの表ではソート機能が動くが、2つ以上の表ではソート機能が使えない問題が起きる。
  • 問題の解決方法や改善案を教えてください。
回答を見る
  • ベストアンサー

「java script」データソートページ送りが可能なテーブル

「java script」データソートページ送りが可能なテーブル java scriptはまったくの初心者です。 インターネット上にあったソースを使ったのですが、わからないことがあったので質問します。 データを、ソートで見ることができるようにしたいので、下記のコードを使いました。 [問題は] 1つのhtmlに一つの表を使う分にはちゃんと動くのですが、 2つ以上表使おうとすると、一番上の表のソート機能は動くのですが、 2つ目の表からはソート機能が使えなくなってしまいます。 どうしたら2つ目の表もソート機能が使えるようにするのはどうしたらよいですか? [使用ソース]   <table> <tr> <th>・・・</th> <th>・・・</th> </tr> <tr> <td>・・・</td> <td>・・・</td> </tr> <tr> <td>・・・</td> <td>・・・</td> </tr> </table>       <div id="controls"> <div id="perpage"> <select onchange="sorter.size(this.value)"> <option value="5">5</option> <option value="10" selected="selected">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> <span>表示ページ数を選択できます。</span> </div> <div id="navigation"> <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" /> <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" /> <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" /> <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" /> </div> <div id="text">残りのページ数 <span id="currentpage"></span> of <span id="pagelimit"></span></div> </div> <script type="text/javascript" src="script.js"></script> <script type="text/javascript"> var sorter = new TINY.table.sorter("sorter"); sorter.head = "head"; sorter.asc = "asc"; sorter.desc = "desc"; sorter.even = "evenrow"; sorter.odd = "oddrow"; sorter.evensel = "evenselected"; sorter.oddsel = "oddselected"; sorter.paginate = true; sorter.currentid = "currentpage"; sorter.limitid = "pagelimit"; sorter.init("table",1); </script> 以上よろしくお願いいたします。

noname#145909
noname#145909

質問者が選んだベストアンサー

  • ベストアンサー
noname#140925
noname#140925
回答No.3

以下にテーブルソートの解説が載ってますから、じっくり読んでみてください。 [参考]ASCII.jp:実務で使えるjQueryプラグイン3選|Web制作の現場で使えるjQuery UIデザイン入門 http://tech.ascii.jp/elem/000/000/484/484582/

noname#145909
質問者

お礼

お礼が遅くなりました。 とっても参考になりました。 ありがとうございます

その他の回答 (2)

回答No.2

No1です。 すみません、質問の意図を読み違えていたかもしれません。 tableを2つにした際に、sorterとやらも2つに増やしているのかと思ったのですが、1つだけでやっているのでしょうか。 でしたら先ほどの回答は本質ではありません。 その場合、答えは分かりません。外部JavaScriptを使っているようですので、その内容が分からない限り対処法は不明です。 ただ、 sorter.init("table",1); のあたりが怪しい気はします。これを2に変えてみると何かが起こりそうな予感がします。

noname#145909
質問者

お礼

お礼が遅くなりました。 ありがとうございます

回答No.1

変数名をすべて変えれば大丈夫だと思います。

noname#145909
質問者

補足

回答ありがとうございます 全く触ったことがないので、どう変えればよいのかも よくわからないのですが、 どうしたらよいでしょうか?

関連するQ&A

  • テーブルソート

    お世話になります 今テーブルソートをしているのですがIE,Operaではうまくいったのですがfirefoxでは nodeArray[i].childNodes[k].firstChild has no properties と警告が出てソーティングがうまくできません どのようにすればいいでしょうか? p.s. 下記のテーブルはCGIで動的に書いたソースをコピーして擬似表示したものです 状況:偶数のonclickが作動せず奇数のonclickがずれてテーブルソートしています   onclick(3)でHPのソート、onclick(5)でMPのソートという感じです・・・   参考にしたサイトや静的に表示したテーブルでは正常に機能することもあります <script language="javascript"><!-- var x=new Array(); var nodeArray=new Array(); var n; function sortTable(k) { if(!document.getElementById) return; n = document.getElementById("ranksort").rows.length; for(i=0;i<n;i++){ nodeArray[i]=document.getElementById("t["+i+"]"); } for(i=0;i<n;i++){ xval=nodeArray[i].childNodes[k].firstChild.nodeValue; x[i]=parseFloat(xval); } sort(); show(); } function sort(){ complete=false; while(!complete){ complete=true; for(i=0;i<n-1;i++){ if(x[i]<x[i+1]){ buf=x[i];x[i]=x[i+1];x[i+1]=buf; buf=nodeArray[i];nodeArray[i]=nodeArray[i+1];nodeArray[i+1]=buf; complete=false; } } } } function show(){ tbody=document.getElementById('ranksort') for(i=0;i<n;i++){ tbody.removeChild(nodeArray[i]); } for(i=0;i<n;i++){ tbody.appendChild(nodeArray[i]); } } //--> </script> <div id='ability box'> <small>タイトルをクリックするとランキングソートされます</small> <table lang="ja" border="1" style='font-size:14px;'> <thead> <tr> <th>名前</th> <th onclick='sortTable(1);'>H P</th> <th onclick='sortTable(2);'>M P</th> <th onclick='sortTable(3);'>力</th> <th onclick='sortTable(4);'>知能</th> <th onclick='sortTable(5);'>信仰心</th> <th onclick='sortTable(6);'>生命力</th> <th onclick='sortTable(7);'>素早さ</th> <th onclick='sortTable(8);'>運</th> <th onclick='sortTable(9);'>人気</th> <th onclick='sortTable(10);'>賞金額</th> </tr> </thead> <tbody id="ranksort"> <tr id="t[0]"> <td>452</td> <td>32</td> <td>15</td> <td>13</td> <td>5</td> <td>5</td> <td>6</td> <td>5</td> <td>10</td> <td>0</td> <td>10000000</td> </tr> <tr id="t[1]"> <td>コス</td> <td>26</td> <td>14</td> <td>6</td> <td>6</td> <td>13</td> <td>11</td> <td>10</td> <td>13</td> <td>0</td> <td>0</td> </tr> <tr id="t[2]"> <td>コスモス</td> <td>30</td> <td>11</td> <td>13</td> <td>13</td> <td>12</td> <td>6</td> <td>6</td> <td>5</td> <td>0</td> <td>0</td> </tr> </tbody></table> </div>

  • tableソート

    新着順になっているテーブルをjqueryで名前ごとにまとめることはできますか? スレ   名前   日時 ああ    ここ   2014/1/31 いい    たた   2014/1/20 ああ    ここ   2014/1/10 ああ    ここ   2014/1/01 こんな感じにしたいです ああ    ここ   2014/1/31 └     ここ   2014/1/10 └     ここ   2014/1/01 いい    たた   2014/1/20 html <table width="100%"> <tr> <th>スレ</th> <th>なまえ</th> <th>新着日時</th> </tr> <tbody> <tr><td>ああ</td><td>test1</td><td>2014/01/31</td></tr> <tr><td>いい</td><td>test2</td><td>2014/01/20</td></tr> <tr><td>ああ</td><td>test3</td><td>2014/01/10</td></tr> <tr><td>ああ</td><td>test4</td><td>2014/01/01</td></tr> </tbody> </table> クリックでのソートはいりません。表示したときにソートするのみで結構です よろしくお願いします

  • 【緊急】リアルタイムでエラーチェック

    下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。 このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>exValidationサンプル 2</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.js"></script> <script type="text/javascript" src="js/exvalidation.js"></script> <script type="text/javascript" src="js/exchecker-ja.js"></script> <script type="text/javascript"> $(function(){ $("form") .exValidation({ rules: { name: "required", kana: "required katakana", email: "required email hankaku group", pass: "required min6 max12", repass: "required retype-pass", radio: "radio", checkbox: "checkbox" }, errInsertPos: 'after', errPosition: 'fixed' }); }); </script> </head> <body> <div class="pagebody"> <h1>exValidation</h1> <form> <fieldset> <p class="attention">*は必須項目です</p> <table> <tbody> <tr> <th>Name<span>*</span></th> <td><input type="text" id="name" name="name" value="" /></td> </tr> <tr> <th>Kana<span>*</span></th> <td><input type="text" id="kana" name="kana" value="" /></td> </tr> <tr> <th>Mail<span>*</span></th> <td><span id="email"><input type="text" id="email" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td> </tr> <tr> <th>Password<span>*</span></th> <td><input type="password" id="pass" name="pass" value="" /></td> </tr> <tr> <th>Retype-Password<span>*</span></th> <td><input type="password" id="repass" name="repass" value="" /></td> </tr> <tr> <th>Sex<span>*</span></th> <td> <span id="radio"> <label for="male"><input type="radio" id="male" name="sex" value="male" />male</label> <label for="female"><input type="radio" id="female" name="sex" value="female" />female</label> </span> </td> </tr> <tr> <th>Prefecture<span>*</span><br /> this is selectable</th> <td> <select id="pref" name="pref" class="selectable"> <optgroup label="---"> <option value="">---</option> </optgroup> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> <optgroup label="東北"> </optgroup> </select> </td> </tr> <tr> <th>City</th> <td><input type="text" name="city" value="" /></td> </tr> <tr> <th>Street</th> <td><input type="text" name="street" value="" /></td> </tr> <tr> <th>Favorite<span>*</span></th> <td> <span id="checkbox"> <label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label> <label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label> <label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label> <label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label> <label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label> </span> </td> </tr> </tbody> </table> </fieldset> <p class="submit"><input type="submit" value="Submit" class="button" /></p> </form> </div> </body> </html>

  • IEでimages[...]のエラーになる原因は?

    下記プログラムをIETesterで開くと、 このページのスクリプトでエラーが発生しました。 文字: 3 エラー: 'document.images[...]'はNullまたはオブジェクトではありません コード: 0 というエラーメッセーが出てしまいます。 Firefoxだと正常に動いたのですが、 document.images[i].srcというのは、IEで対応していないということでしょうか? それか、そもそもこういった書き方は間違いでしょうか? <script language="JavaScript"> <!-- rrr = new Image(200,100); rrr.src = "sample.jpg"; function sss(){ document.fff.nnn.value=""; ppp.innerHTML = "" for(var i=1; i<=30; i++){ document.images[i].src = rrr.src; : : : : : //--> </script> </head> <body onload="sss()"> <form name="fff"> <img src="title.jpg"> <div id="nnn"></div> <table> <tr> <td><img src="a.jpg" width="200" height="100" onclick="yyy(1)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(2)"></td> <td><img src="a.jpg" width="200" height="100" onclick="yyy(3)"></td>

  • 画像を並べ替える・・・

    質問させていただきます。 下記のようなコードでページを作成しています。 この中でドラックアンドドロップで画像を入れ替える処理を 行っています。 横に入れ替えが出来るようになっているのですが、 右から左に画像を入れ替えようとすると、画像がぶれて、 画像の入れ替えがやりにくい状態になってしまいます。 わかる方いらっしゃいましたらご助言頂けないでしょうか。 http://journal.mycom.co.jp/series/scriptaculous/004/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META http-equiv="Content-Style-Type" content="text/css"> <title>データ</title> <LINK href="css/detail_style.css" type="text/css" rel=stylesheet> <link rel="stylesheet" type="text/css" href="jslib/demo.css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="jslib/highslide/highslide.css" /> <script type="text/javascript" src="jslib/prototype.js"></script> <script type="text/javascript" src="jslib/scriptaculous.js?load=effects,dragdrop"></script> <script type="text/javascript" src="jslib/demo.js"></script> <script type="text/javascript" src="jslib/highslide/highslide-with-gallery.js"></script> </head> <body> <form name = "imagepic"> <dl id="gloop1"> <dt id="id_2336:8"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2336:8"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2349:4"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2349:4"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2359,2:"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2359,2:"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt> </dl> </form> </body> css↓↓↓↓ h1 { font-size: 1.5em; } dl { position: absolute; top: 11em; padding: 0; list-style-type: none; width: 100em; margin-left: 0; padding-left: 0.2em; background: #ddd; } dt { float: left; cursor: move; margin: 1.3em; padding: 1.2em; background: #ff9; border: 1px solid gray; } dl.empty { height: 2em; border: 1px solid silver; background: #ddd; } #gloop1 { left: 2em; } #gloop1 { top: 6em; } #gloop1 dl { background: #ff9; }

  • このhtmlの書き方は正しいでしょうか。

    下記の情報の配置の仕方は正しいでしょうか? 実際に使用するときは<tbody>~</tbody>を複数増やします。 サンプルでは2つですが、これが400以上になります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title></title> <style type="text/css"> body { background-color: #f5e088; margin: 0; padding: 0; font-size: 15px; } #base { width: 600px; margin: 0 auto; background-color: #fff; } table#ttt { width: 600px; background-color: #ccc; border: 2px solid #000; padding: 15px 0px; } table#ttt th, table#ttt td { width: 100px; } td#kkk { text-align:center; } table#ccc th { color: #f00; width: 60px; } table#ccc td { } .shashin, td.shousai { width: 150px; background-color: #ff0; } </style> </head> <body> <div id="base"> <form action="#"> <table id="ttt"> <tr> <th>市</th> <td> <select name=""> <option value="">指定していません</option> <option value="横浜市">横浜市</option> <option value="鶴見区">鶴見区</option> <option value="神奈川区">神奈川区</option> <option value="西区">西区</option> </select> </td> <th>町村</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>小学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> <th>中学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>データ</th> <td> <select name=""> <option value="">指定していません</option> <option value="500">500値未満</option> <option value="1000">500値以上1000値未満</option> <option value="1500">1000値以上1500値未満</option> </select> </td> <th>レベル</th> <td> <select name=""> <option value="">指定していません</option>  <option value="30">30Lv未満</option> <option value="60">30Lv以上60Lv未満</option> <option value="90">60Lv以上90Lv未満</option> <option value="100">90Lv以上100Lv以下</option> </select> </td> </tr> <tr> <td colspan="4" id="kkk"> <input type="button" id="" value="検索" onclick=""> </td> </tr> </table> </form> 方法その1 <table id="ccc"> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> </table> </div> </body> </html> このような内容を作る時はテーブルが一番正しいのでしょうか? 最も正しい方法を教えて頂きたいです。

    • ベストアンサー
    • HTML
  • 検索機能とページ送りのできるテーブルの作成について

    お世話になります <input type="text" name="search" id="search"> <table width="800" border="0" id="item" name="item">  <thead>   <tr>    <th></th>   </tr>  </thead>  <tbody>   <tr>    <td>     <a href="hoge.html">      <img src="hoge.jpg">     </a>     <b>ほげ</b>    </td>   </tr>   <tr>    <td>     <a href="hogehoge.html">      <img src="hogehoge.jpg">     </a>     <b>ほげほげ</b>    </td>   </tr>  </tbody> </table> ※本来はTR要素がもっと沢山増えます。 このテーブルに対して表示件数が5件を超えたらページ送りができるようにし、テキストボックスの内容で検索をかけて表示をしたいのですが、何か良い解決案はありませんか? 一応自分でもいろいろ調べて http://d.hatena.ne.jp/Rewish/20090703/1246615343 http://ponk.jp/?p=2413 を共存させるようとしてみたのですがどうもうまく動作しませんでした。

  • TinyTableというスクリプトのソートについて

    テーブルをソートできる下記のソースを使っているのですが、デフォルトで一列目の「ID」を降順でならばせたいのですがどのように設定をすれば良いでしょうか? 【サンプルデモ】 http://sandbox.scriptiny.com/table-sorter/index.html 【参考サイト】 http://shanabrian.com/web/library/tiny_table.php 参考サイト内に、 1 <script type="text/javascript"> 2 var sorter = new TINY.table.sorter("sorter"); 3 // sorter.init(テーブルのID名, 初期ソート開始番号); 4 // (左セル 0番からが開始番号となります。) 5 // なお、初期ソートが不要であれば、,(カンマ)を含めて削除してください。 6 // 例:sorter.init("sample"); 7 sorter.init("sample", 1); とあったため、「sorter.init("sample", 0);」と変更したのですがどうしても「昇順」となってしまいます。 これをIDの数字が大きい順(降順)にデフォルトで並び替えるにはどのようにすれば良いでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • Java
  • テーブルをソートするには

    テーブルをソートしたいのですが,下のリンクのスクリプトでは,<tr> に指定した onClick などの属性が失われてしまいます。属性を失わずにソートするにはどうすればいいのでしょうか。 http://okwave.jp/kotaeru.php3?qid=1818924 よろしくお願いします

  • TinyTableというスクリプトのソートについて

    テーブルをソートできる下記のソースを使っているのですが、デフォルトで一列目の「ID」を降順でならばせたいのですがどのように設定をすれば良いでしょうか? 【サンプルデモ】 http://sandbox.scriptiny.com/table-sorter/index. … 【参考サイト】 http://shanabrian.com/web/library/tiny_table.php 参考サイト内に、 1<script type="text/javascript"> 2 var sorter = new TINY.table.sorter("sorter"); 3 // sorter.init(テーブルのID名, 初期ソート開始番号); 4 // (左セル 0番からが開始番号となります。) 5 // なお、初期ソートが不要であれば、,(カンマ)を含めて削除してください。 6 // 例:sorter.init("sample"); 7 sorter.init("sample", 1); とあったため、「sorter.init("sample", 0);」と変更したのですがどうしても「昇順」となってしまいます。 これをIDの数字が大きい順(降順)にデフォルトで並び替えるにはどのようにすれば良いでしょうか? よろしくお願いいたします。

専門家に質問してみよう