Q&A
回答有難うございます。
非表示にさせたい表は、長くて50行程度なのですが、JavaScriptのdisplay:none と、PHPの$page変数を結びつけることはできますか？
HTMLでWEBページに3つの表を表示させています。
1つ目が機能別の集計表、2つ目が都道府県別の集計表、3つ目が顧客別の集計表です。
3つ目の顧客別集計表だけ、何千という行数になるので、2ページ目、3ページ目と
ページをめくる形にしたいのですが、その時に、1つ目と2つ目の表を非表示にすることは
できますでしょうか？（2つの表は1ページ目でお役目終了。）
非表示にしたいのは、表のタイトル含め、タイトル行とdt行すべてです。
集計は、PHPを使ってまして、ページの変数もPHPの変数で取得しています。
PHPで処理するか、あるいはJavaScriptでできそうな気がするのですが…
因みに、PHPはページ数の変数の値で場合分けしましたが、数値も変になり、非表示もできませんでした。
（一番下のコード参照）
【ページ処理をしてる部分】
$page = $_REQUEST['page'];
if ($page == '') {
$page = 1;
}
$page = max($page, 1);
// 最終ページを取得する
$sql_4 = 'SELECT COUNT( DISTINCT g.house_name ) AS cnt FROM house AS g INNER JOIN access_record AS a ON a.house_id = g.house_id';
$recordSet = mysqli_query($link, $sql_4);
$table = mysqli_fetch_assoc($recordSet);
$maxPage = ceil($table['cnt'] / 5);
$page = min($page, $maxPage);
$start = ($page - 1) * 5;
//フッターの部分
<ul class="paging"> <li><a href="access_result_test_2.php?page=<?php print($page - 1); ?>">前のページへ</a></li> <li><a href="access_result_test_2.php?page=<?php print($page + 1); ?>">次のページへ</a></li> </u>【非表示にしたい表の部分】
<?php //SQLはファイルから読み込む $sql_2 = file_get_contents("test2_page.sql"); // SQLクエリを実行する $result_2 = mysqli_query($link, $sql_2); //$data = mysqli_fetch_array($result); ?> <div style="padding:20pt"> <h2>【都道府県別使用数】</h2> <table width="100%"> <tr style="border-bottom:3px solid blue;"> <th scope="col">TOP</th> <th scope="col">都道府県名</th> <th scope="col" style="background-color:blue;">今月</th> <th scope="col">1ヶ月前</th> <th scope="col">2ヶ月前</th> <th scope="col">3ヶ月前</th> <th scope="col">4ヶ月前</th> <th scope="col">5ヶ月前</th> <th scope="col" style="background-color:blue;">半年前</th> <th scope="col">7ヶ月前</th> <th scope="col">8ヶ月前</th> <th scope="col">9ヶ月前</th> <th scope="col">10ヶ月前</th> <th scope="col">11ヶ月前</th> <th scope="col" style="background-color:blue;">1年前</th> </tr> <?php $i = 1; $c = 0; while($data = mysqli_fetch_array($result_2,MYSQLI_ASSOC)){ ?><?php if ($c % 2) { print('<tr style="background-color: #bce0f2">'); } else { print('<tr>'); }
?>
<?php print('<td style="text-align:center;">' . $i . '</td>'); $i++ ?>
<td style="text-align:left;border-right:3px;border-right-color: #0000ff; border-right-style: double;"><?php print $data['prefectures_name']; ?></td>
<td><?php print $data['this']; ?></td>
<td><?php print $data['one']; ?></td>
<td><?php print $data['two']; ?></td>
<td><?php print $data['three']; ?></td>
<td><?php print $data['four']; ?></td>
<td><?php print $data['five']; ?></td>
<td><?php print $data['six']; ?></td>
<td><?php print $data['seven']; ?></td>
<td><?php print $data['eight']; ?></td>
<td><?php print $data['nine']; ?></td>
<td><?php print $data['ten']; ?></td>
<td><?php print $data['eleven']; ?></td>
<td><?php print $data['year']; ?></td>
</tr>
【試してみたPHPのif文】
<?php if ($page =! 1){ //2ページ目以降は、表を非表示 print('<div></div>'); }else { print ('<div style="padding:20pt;"> <h2>【機能別使用数】</h2> <table width="100%"> <tr style="border-bottom:3px solid blue;"> <th scope="col">TOP</th> <th scope="col">機能（アクセスタイプ）</th> <th scope="col" style="background-color:blue;">今月</th> <th scope="col">1ヶ月前</th> <th scope="col">2ヶ月前</th> <th scope="col">3ヶ月前</th> <th scope="col">4ヶ月前</th> <th scope="col">5ヶ月前</th> <th scope="col" style="background-color:blue;">半年前</th> <th scope="col">7ヶ月前</th> <th scope="col">8ヶ月前</th> <th scope="col">9ヶ月前</th> <th scope="col">10ヶ月前</th> <th scope="col">11ヶ月前</th> <th scope="col" style="background-color:blue;">1年前</th> </tr>'); $i_3 = 1; $c_3 = 0; while($data = mysqli_fetch_array($result_3,MYSQLI_ASSOC)){ if ($c_3 % 2) { print('<tr style="background-color: #bce0f2">'); } else { print('<tr>'); } print('<td style="text-align:center;">') . $i_3 . print('</td>'); $i_3++; print('<td style="text-align:left;border-right:3px;border-right-color: #0000ff; border-right-style: double;">') . $data['access_type'] . print('</td>'); print('<td>') . $data['this'] . print('</td>'); print('<td>') . $data['one'] . print('</td>'); print('<td>') . $data['two'] . print('</td>'); print('<td>') . $data['three'] . print('</td>'); print('<td>') . $data['four'] . print('</td>'); print('<td>') . $data['five'] . print('</td>'); print('<td>') . $data['six'] . print('</td>'); print('<td>') . $data['seven'] . print('</td>'); print('<td>') . $data['eight'] . print('</td>'); print('<td>') . $data['nine'] . print('</td>'); print('<td>') . $data['ten'] . print('</td>'); print('<td>') . $data['eleven'] . print('</td>'); print('<td>') . $data['year'] . print('</td>'); print('</tr>'); $c_3++; }//while終わり print('</table> </div><!--padding 20pt -->'); } ?>
回答2件
0
ベストアンサー
URLの?以降に何ページ目かを渡しているようですので、window.locationから取得できるかと思います。
(page=が無い場合or1の場合は表示、それ以外は非表示で)
下記ページが参考になるかと思います。
http://phpjavascriptroom.com/?t=js&p=location4
追記：
表示状態から非表示状態へ切り換えると、
一部マシン、一部ブラウザでちらつく可能性があるので、
元から非表示にしておき、1ページ目だけ表示するように書きました。
消したい要素(divなりtableなり)の
・styleに"display:none;"を追加
・classに"dynamicDisplay"を追加
→既にclassが付いている場合は半角スペース区切り
上記を実施後、以下のソースを任意の場所に挿入すれば、可能です。
JavaScript
1<script> 2$(function(){ 3 var getVar = window.location.search.substring(1,window.location.search.length); //?以降を取得(?は要らないので1文字削除) 4 var getVarArray = getVar.split("&"); //&で文字列を分割 5 var pageNum = 0; 6 for(var i = 0; i < getVarArray.length; i++){ 7 var val = getVarArray[i].split("="); //=で文字列を分割 8 if(val[0] == "page"){ 9 pageNum = val[1] - 0; //0を引いて文字列を数値に変換 10 } 11 } 12 if(pageNum <= 1){ 13 // getパラメータpageが見つからないか、1の場合 14 $('.dynamicDisplay').css('display', 'block'); 15 } 16}); 17</script>
再追記：
JavaScriptというより、JQueryが使えないのだと思います。
(勝手にJQueryを使用していると思い込んでいました。ｺﾞﾒﾝﾅｻｲ。)
スクリプトを以下に変更してください。(古いのは消してください。)
JavaScript
1<script> 2window.onload = function(){ 3 var getVar = window.location.search.substring(1,window.location.search.length); //?以降を取得(?は要らないので1文字削除) 4 var getVarArray = getVar.split("&"); //&で文字列を分割 5 var pageNum = 0; 6 for(var i = 0; i < getVarArray.length; i++){ 7 var val = getVarArray[i].split("="); //=で文字列を分割 8 if(val[0] == "page"){ 9 pageNum = val[1] - 0; //0を引いて文字列を数値に変換 10 } 11 } 12 13 if(pageNum <= 1){ 14 // getパラメータpageが見つからないか、1の場合 15 if(isIE() != 'ie'){ 16 var eleArray = document.getElementsByClassName("dynamicDisplay"); 17 if(eleArray != null){ 18 for(var i = 0; i < eleArray.length; i++){ 19 eleArray[i].style.display = 'block'; 20 } 21 } 22 }else{ 23 // document.getElementsByClassNameを使えない場合があるため回りくどい処理を行う 24 var allElements = document.getElementsByTagName('*'); 25 var noneDisplayElements = []; 26 for (var i = 0, j = 0; i < allElements.length; i++){ 27 if (allElements[i].className == 'dynamicDisplay'){ 28 noneDisplayElements[j] = allElements[i]; 29 j++; 30 } 31 } 32 if(noneDisplayElements != null){ 33 for(var i = 0; i < noneDisplayElements.length; i++){ 34 noneDisplayElements[i].style.display = 'block'; 35 } 36 } 37 } 38 } 39} 40 41//使用ブラウザの判断 42function isIE(){ 43 var userAgent = window.navigator.userAgent.toLowerCase(); 44 45 if(userAgent.indexOf('msie') != -1){ 46 return 'ie'; 47 }else{ 48 return 'other'; 49 } 50} 51</script>
ちなみに、JavaScriptが動作しているかどうかはアラートを入れると分かりやすいです。
適当なところに以下を差し込んでみてください。
alert("JavaScript動作確認");
投稿2015/11/25 08:00
編集2015/11/26 03:14
総合スコア1507
0
Javascriptならdivタグのstyleを"display:none"とセットしてあげれば非表示になります。
しかし、何千行もあるデータを転送する時間もけっこうかかるでしょうから、必要になった時にAJaxで取得するようにした方がベターかもしれません。
投稿2015/11/25 07:36
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/25 08:22
2015/11/26 02:41 編集
2015/11/26 05:50
2015/11/26 06:06
2015/11/26 06:51