プロが教えるわが家の防犯対策術！

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

締切済

  • 質問者：george723
  • 質問日時：
  • 回答数：8件

お世話になります

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.8

  • 回答者： taloo
  • 回答日時：

> 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);
}
    • good
    • 0
    • 件
通報する

No.7

  • 回答者： babu_baboo
  • 回答日時：

全角空白は、半角空白になおしてください。


みすがあったら、じぶんでなおしてね。

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

わくわく。わくわく。わくわく。わくわく。
    • good
    • 1
    • 件
通報する

No.6

  • 回答者： babu_baboo
  • 回答日時：

//その３


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」と、ゆっくりうちこめば、いみがわかるかな？
//ひつようないとおもうけど^^;
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

//その２



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' );
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： babu_baboo
  • 回答日時：

じぶんにぴったりのふんどしがないので、いとをつぐむところから！って。

なんかさぁ～
ハードルをあげられたような・・。
そしてながくなるたび、ミスがうじゃうじゃ？
ながいので、きっとぶんかつです。
<!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;
};
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yyr446
  • 回答日時：

george723様が最初に調べた２つサンプルサイトにある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使えばそんなに
長いコードにならないです。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： babu_baboo
  • 回答日時：

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



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

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


というのはどうだろう？
    • good
    • 0
    • 件
通報する

No.1

jQueryを使って実装することが出来ます。


ページ送り：http://ponk.jp/?p=2413
簡易検索：http://f32.aaa.livedoor.jp/~azusa/?t=ajax&p=jque …
    • good
    • 1
    • 件
通報する
この回答へのお礼

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

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

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

通報する
お礼日時：2010/03/10 16:19

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報