- 締切済み
検索機能とページ送りのできるテーブルの作成について
お世話になります <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 を共存させるようとしてみたのですがどうもうまく動作しませんでした。
- みんなの回答 (8)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2280)
> No.1 お礼 > 検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。 これはCGIで処理すべき内容では? もしくは5件表示 -> ページ送りの時は全件を消してAjaxで次の5件を取得、表示 かと。 <div id="output"><table>略</table></div> <a onclick="next()">次へ</a> function next(){ // ajaxでデータを取得(略) // responseTextはCGIアプリでHTMLに整形済み document.getElementById('output').innerHTML=xhr.responseText; // またはJSONやCSV、XMLからHTML-Elementに変換する var elmentdata= xhr.responseTextなどをdocument.createElement()などでごにょごにょしたもの var output=document.getElementById('output'); output.replaceChild(elementdata, output.firstChild); }
- babu_baboo
- ベストアンサー率51% (268/525)
全角空白は、半角空白になおしてください。 みすがあったら、じぶんでなおしてね。 いか、むししてください。 >jQuery使えばそんなに長いコードにならないです。 わくわく。わくわく。わくわく。わくわく。
- babu_baboo
- ベストアンサー率51% (268/525)
//その3 document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'keyup', (function ( ) { var timerId = null; return function ( evt ) { var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/; if( 'key' === e.id ) { //ユーザーネームのフォーム要素のid timerId && clearTimeout( timerId ); timerId = setTimeout( function ( ) { itemList.find( e.value ); }, 250 ); } }; })(), false ); </script> //もじすうのせいげんは、なんとかならんものかなぁ~~~ //このあいだのしつもんにこたえてみたものをつぎたしました //はんかくすうじの「12」と、ゆっくりうちこめば、いみがわかるかな? //ひつようないとおもうけど^^;
- babu_baboo
- ベストアンサー率51% (268/525)
//その2 Hoge.prototype.nextTable = function ( n ) { n = n || 1; this.page = ( this.page + n ) % this.tbody.length; return this.viewTable( ); }; Hoge.prototype.previousTable = function ( n ) { n = n || 1; var len = this.tbody.length; this.page = ( len + this.page - ( n % len ) ) % len; return this.viewTable( ); }; Hoge.prototype.viewTable = function ( ) { var n = this.page + 1; for( var c = 1, o; o = this.tbody[c]; c++ ) o.style.display = c == n ? 'table': 'none'; return this.page; }; Hoge.prototype.makeViewTable = function ( ) { this.resetViewTable(); var tb = this.tbody[1]; if( !tb ) return false; var trs = tb.childNodes, tr, tgtTbody = null; while( tr = trs[ this.vmax ] ) { if( tgtTbody && tgtTbody.childNodes.length === this.vmax ) { this.table.appendChild( tgtTbody ); tgtTbody = null; } if( !tgtTbody ) { tgtTbody = document.createElement( 'tbody' ); } tgtTbody.appendChild( tr ); } if( tgtTbody ) this.table.appendChild( tgtTbody ); return this.page = 0; }; Hoge.prototype.find = function ( str, no ) { this.resetViewTable( true ); var tgtTRs = this.tbody[0].childNodes; var addTbody = document.createElement( 'tbody' ); var tr, cnt = 0, td, txt; no = 'number' === typeof no ? no: 0; while( tr = tgtTRs[ cnt++ ] ) { td = tr.childNodes[ no ]; txt = td./*@if (@_jscript) innerText @else@*/ textContent /*@end@*/; if( -1 < txt.indexOf( str ) || '' == str ) addTbody.appendChild( tr.cloneNode( true ) ); } this.table.appendChild( addTbody ); this.makeViewTable(); this.viewTable(); } var itemList = new Hoge( 'item' );
- babu_baboo
- ベストアンサー率51% (268/525)
じぶんにぴったりのふんどしがないので、いとをつぐむところから!って。なんかさぁ~ ハードルをあげられたような・・。 そしてながくなるたび、ミスがうじゃうじゃ? ながいので、きっとぶんかつです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <body> <form action="#" id="test"> <p> keyWord: <input type="text" size="20" id="key"> <input type="button" value="previous" onclick="itemList.previousTable()"> <input type="button" value="next" onclick="itemList.nextTable()"> </p> </form> <table width="800" border="1" id="item"> <thead> <tr> <th>Item List</th> </tr> </thead> <tbody> <tr><td>ほげ1</td></tr> <tr><td>ほげ2</td></tr> <tr><td>ふが1</td></tr> <tr><td>ふが2</td></tr> <tr><td>ふが3</td></tr> <tr><td>ふが4</td></tr> <tr><td>ほげ3</td></tr> <tr><td>ほげ4</td></tr> <tr><td>ほげ5</td></tr> <tr><td>ほげ6</td></tr> <tr><td>ほげ7</td></tr> <tr><td>ほげ8</td></tr> <tr><td>ほげ9</td></tr> <tr><td>ほげ10</td></tr> <tr><td>ほげ11</td></tr> <tr><td>ほげ12</td></tr> <tr><td>ほげ13</td></tr> <tr><td>ほげ14</td></tr> <tr><td>ほげ15</td></tr> <tr><td>ほげ16</td></tr> </tbody> </table> <script type="text/javascript"> //@cc_on var Hoge = function ( ) { this.vmax = 5; this.init.apply( this, arguments ); }; Hoge.prototype.init = function ( id ) { var e = document.getElementById( id ); this.table = e; this.tbody = e.getElementsByTagName( 'tbody' ); var tbody = this.tbody[0]; var trs = tbody.childNodes; var cnt = 0; var tr, tds, td; for(; tr = trs[ cnt ]; ) { if( 1 !== tr.nodeType ) tbody.removeChild( tr ); else { tds = tr.childNodes; for( var cnt2 = 0; td = tds[ cnt2 ]; cnt2++ ) { if( 1 !== td.nodeType ) tr.removeChild( td ); } cnt++; } } tbody.style.display = 'none'; this.page = 0; this.resetViewTable(); }; Hoge.prototype.resetViewTable = function ( sw ) { var b; var t = sw ? 1: 2; while( b = this.tbody[ t ] ) this.table.removeChild( b ); this.page = -1; return this.page; };
- yyr446
- ベストアンサー率65% (870/1330)
george723様が最初に調べた2つサンプルサイトにあるjavascript を共存させて実現できます。 ちょっと、いんちきしています。 検索マッチした時<tr>タグに勝手にhits属性なるものをjQuryで付加し、 マッチした<tr>のみ、ページ送りの対象要素としちゃってます。 (firefox3.5とIE8.0でうまくいきました。) (見本) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript" charset="utf-8" src="/jslib/jquery-1.4.2.min.js"></script> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <title></title> <style type="text/css"> td, th { border: 1px solid black; padding: 1px; } #prev, #next { color: red; cursor: pointer; } </style> <script type="text/javascript" charset="utf-8"> <!-- $(function() { var tr = $('tr','#item tbody'); var page = 0; $.fx.off = true; $('#search').keyup(function(){ $("#navi").empty(); var query = $(this).val().replace(/^\s+|\s+$/g,'').replace(/\s+/g,' ').split(' '); if (query[0] === '') { tr.show(); return; } tr.each(function(){ var self = $(this); var itemName = $('td:nth-child(1)',self).text(); for(var i=0,len=query.length;i<len;i++){ if (!itemName.match(new RegExp(query[i],'i'))){ self.hide(); self.removeAttr("hit"); return; }else{ self.attr("hit","hit"); return; } } self.show(); self.removeAttr("hit"); }); var hits=$("tr[hit='hit']"); if(hits.length > 5){ $("<span id=\"prev\"><</span><span id=\"page\"></span><span id=\"next\">></span>").appendTo("#navi"); $('#prev').click(function() { if (page > 0) { page--; draw(hits); } }); $('#next').click(function() { if (page < ($(hits).size()) / 5 - 1) { page++; draw(hits); } }); draw(hits); } }); function draw(hits) { $('#page').html(page + 1); hits.hide(); hits.slice(page*5,page*5+5).show(); } }); // --> </script> </head> <body> <input type="text" id="search"> <div id="navi"></div> <table width="800" border="0" id="item"> <thead><tr><th></th></tr> </thead> <tbody> <tr><td>ほげ1</td></tr> <tr><td>ほげ2</td></tr> <tr><td>ふが1</td></tr> <tr><td>ふが2</td></tr> <tr><td>ふが3</td></tr> <tr><td>ふが4</td></tr> <tr><td>ほげ3</td></tr> <tr><td>ほげ4</td></tr> <tr><td>ほげ5</td></tr> <tr><td>ほげ6</td></tr> <tr><td>ほげ7</td></tr> <tr><td>ほげ8</td></tr> <tr><td>ほげ9</td></tr> <tr><td>ほげ10</td></tr> <tr><td>ほげ11</td></tr> <tr><td>ほげ12</td></tr> <tr><td>ほげ13</td></tr> <tr><td>ほげ14</td></tr> <tr><td>ほげ15</td></tr> <tr><td>ほげ16</td></tr> </tbody> </table> </body> </html> あまりスマートじゃないです。とってつけたような、 人のふんどしを集めて別のふんどしにしているような、 どうせなら、 No2.様の回答の 「ことば(かな)」の部分を 最初から作りなおした方がよいでしょう。jQuery使えばそんなに 長いコードにならないです。
- babu_baboo
- ベストアンサー率51% (268/525)
プログラムがかなりながくなりそうなので、ことば(かな)で。 <tbody>は、ふくすうあってもよいので、さいしょのtbody[0]をデータぶぶんとして非ひょうじにする けんさくじょうけんがみたされたものを、tbody[1]をつくりそれにコピーする。 tbody[1]のtrのぎょうすうをかぞえ、5ぎょうをこえたら、tbody[2]に さらにふえたなら、[3][4]とつくり、それぞれにいどうする。 ひょうじには、tbody[0]いがいを、きりかえる というのはどうだろう?
jQueryを使って実装することが出来ます。 ページ送り:http://ponk.jp/?p=2413 簡易検索:http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_plugin_tablesort#a_quicksearch
お礼
ご回答ありがとうございます。 指定していただいたurlのページ送りと簡易検索を実装すると、検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。 説明不足で申し訳ありませんでした