みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

検索機能とページ送りのできるテーブルの作成について

お世話になります

<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
を共存させるようとしてみたのですがどうもうまく動作しませんでした。

投稿日時 - 2010-03-10 16:02:28

QNo.5740760

困ってます

このQ&Aは役に立ちましたか?

16人が「このQ&Aが役に立った」と投票しています

回答(8)

ANo.8

> 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);
}

投稿日時 - 2010-03-11 14:29:58

ANo.7

全角空白は、半角空白になおしてください。
みすがあったら、じぶんでなおしてね。

いか、むししてください。
>jQuery使えばそんなに長いコードにならないです。

わくわく。わくわく。わくわく。わくわく。

投稿日時 - 2010-03-10 23:48:01

ANo.6

//その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」と、ゆっくりうちこめば、いみがわかるかな?
//ひつようないとおもうけど^^;

投稿日時 - 2010-03-10 23:31:28

ANo.5

//その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' );

投稿日時 - 2010-03-10 23:28:32

ANo.4

じぶんにぴったりのふんどしがないので、いとをつぐむところから!って。なんかさぁ~
ハードルをあげられたような・・。
そしてながくなるたび、ミスがうじゃうじゃ?
ながいので、きっとぶんかつです。
<!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;
};

投稿日時 - 2010-03-10 23:27:11

ANo.3

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使えばそんなに
長いコードにならないです。

投稿日時 - 2010-03-10 21:05:54

ANo.2

プログラムがかなりながくなりそうなので、ことば(かな)で。

<tbody>は、ふくすうあってもよいので、さいしょのtbody[0]をデータぶぶんとして非ひょうじにする
けんさくじょうけんがみたされたものを、tbody[1]をつくりそれにコピーする。
tbody[1]のtrのぎょうすうをかぞえ、5ぎょうをこえたら、tbody[2]に
さらにふえたなら、[3][4]とつくり、それぞれにいどうする。

ひょうじには、tbody[0]いがいを、きりかえる


というのはどうだろう?

投稿日時 - 2010-03-10 16:42:15

jQueryを使って実装することが出来ます。
ページ送り:http://ponk.jp/?p=2413
簡易検索:http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jquery_plugin_tablesort#a_quicksearch

投稿日時 - 2010-03-10 16:06:11

お礼

ご回答ありがとうございます。

指定していただいたurlのページ送りと簡易検索を実装すると、検索結果がテーブルのデータ全件に対してではなく、ページ送りのために表示されたデータ(私の場合は5件)の中の非該当項目が見えなくなるだけだったので、検索結果に引っかからないデータの分を引いたテーブルの項目数でページ送りが実装できるようにしたいのです。

説明不足で申し訳ありませんでした

投稿日時 - 2010-03-10 16:19:34

あなたにオススメの質問