編集履歴

回答編集履歴

リンク

2018/03/14 04:50

投稿

スコア80850

test CHANGED Viewed

@@ -400,7 +400,7 @@
 - jQueryは削られた機能の関係からこのバージョン（1.4.3）を利用する
-　このスクロールプラグインで利用している[msie指定が1.9から使えなくなった](jquery msie)
+　このスクロールプラグインで利用している[msie指定が1.9から使えなくなった](https://www.google.co.jp/search?q=jquery+msie&oq=jquery+msie&aqs=chrome.0.69i59j0l5.6927j0j4&sourceid=chrome&ie=UTF-8)
 - $.postは非同期で実行しているためHTML構築時ではテーブルは存在しない。

ミニマムサンプルコード

2018/03/14 04:50

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -233,3 +233,175 @@
 ちょこちょこ目の前のエラーを直すのではなく、必要な機能だけを単体でしっかり作って確認ができてからやっていった方が確実ですし、本質的なところから理解することができます。
+# ミニマムサンプルコード
+本来、最初に作るべきは下記のようなミニマム構成のコードです。
+おそらくある程度作ったものに対して後からこのプラグインを入れようとしたのもあり、
+元々あったコードもあるかとは思いますが、必ず最小構成で、何の干渉もない状態のもので試した後に、
+本来のコードに埋め込むようにしていくのが、何よりの近道です。
+※動作確認はしてあります。が幅や見栄えなどは別途調整が必要です。
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>test(json→tbodyscroll)</title>
+</head>
+<body>
+<button type="button">生成</button>
+<div id="tbldata"></div>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
+<script src="./js/jquery.tbodyscroll.js"></script>
+<script>
+$(function() {
+	$("button").click(function(){
+        //リスト表示
+        $.post(
+        	"./m.php"
+        , function(data) {
+        	$('[id=tbldata]').html(data.text);
+        	$("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
+        },
+        "json"
+      );
+   });
+});
+</script>
+</body>
+</html>
+```
+m.php
+```php
+<?php
+$strHTML = <<<EOF
+<table id="tbl_list">
+    <thead>
+        <tr>
+            <th><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
+            <th>備品<br>タイプ</th>
+            <th>備品名</th>
+        </tr>
+    </thead>
+    <tbody>
+EOF;
+for($i=1;$i<=100;$i++){
+    $strHTML .= <<<EOF
+        <tr>
+            <td>ステータス{$i}</td>
+            <td>No.{$i}</td>
+            <td>備品名{$i}</td>
+        </tr>
+EOF;
+}
+$strHTML .= <<<EOF
+    </tbody>
+</table>
+EOF;
+$output = array (
+    'total_page' => 100,
+    'text' => $strHTML
+);
+echo json_encode($output);
+```
+ポイント：
+- PHPでエラーは起こさない（超大前提）
+- json返す側は必要なhtmlだけ返す（tableのみ）
+- jsonで返しているので、jsonで受け取るようにする
+　evalJSONなくても[$.postの引数でjson](http://js.studio-kingdom.com/jquery/ajax/post)を指定すれば取れます。
+- jQueryは削られた機能の関係からこのバージョン（1.4.3）を利用する
+　このスクロールプラグインで利用している[msie指定が1.9から使えなくなった](jquery msie)
+- $.postは非同期で実行しているためHTML構築時ではテーブルは存在しない。
+　存在しないタイミングでプラグインを呼び出しては効果がないので、テーブルがhtml上に現れた後にプラグインをそのテーブルに対して行う

調整

2018/03/14 04:48

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -190,7 +190,15 @@
 ```
+となると　 class="demo"　は不要ですね。
+前回質問で「※demoの部分は任意の名前なので変更しても良いですがその場合はtableに記述する名前も同じにしてください」と書いた部分です。
+```html
+<table id="tbl_list">
+```
 # 他に考えられる要因（あくまで可能性のレベル）

追記

2018/03/14 01:24

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -178,6 +178,18 @@
 ```
+tableにtbl_listというIDつけているのでdemoという明らかにテストっぽいのではなくIDあてたほうがいいんじゃないかなあ。
+```javascript
+$(document).ready(function() {
+    $("#tbl_list").tbodyScroll({thead_height:"30px",tbody_height:"100px",head_bgcolor: "transparent",foot_bgcolor: "transparent"});
+});
+```
 # 他に考えられる要因（あくまで可能性のレベル）

修正

2018/03/14 01:20

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -92,7 +92,7 @@
 $strHTML = <<<'eof'
-<table id="tbl_list" cellspacing="0" cellpadding="0" class="demo">
+<table id="tbl_list" class="demo">
             <thead>
@@ -112,6 +112,8 @@
 //↑提示のソースはそのままPHP関数が埋め込んであったので少し修正しています。
+// 何度か指摘していますがtableに入れているcellspacing="0" cellpadding="0" は不要かと。CSSで調整してください。
 ～～～中間部分は省略しています（kei344さん指摘の部分はきちんと直してください）

修正

2018/03/14 01:19

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -74,7 +74,11 @@
-つまりJSONを渡す側は下記だけ返せば良い。
+つまりJSONを渡す側は下記のように書いて、上記簡略化ソースで言えば
+<table></table>に該当する部分だけを返すようにすれば良いです。
 ```php

修正

2018/03/14 01:17

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -22,10 +22,12 @@
  つまり、<html><head>～～～</head><body>XXXXX</body></html>のXXXXXの部分だけ書けば良い。
-　入れてしまうと以下のようなHTML（省略）が出力されてしまい、HTMLとしておかしい。
+　入れてしまうと以下のようなHTMLが出力されてしまい、HTMLとしておかしい。
 　正しくHTMLが組まれていないので、弊害が起きる可能性もあります。
+※簡略化しています
 ```HTML
 <html>

修正

2018/03/14 01:13

投稿

m.ts10806

スコア80850

test CHANGED Viewed

@@ -72,6 +72,76 @@
+つまりJSONを渡す側は下記だけ返せば良い。
+```php
+～～DB接続・取得部分は省略しています
+//ヘッダー部
+$sort_keisokuki_img = _hs($sort_keisokuki_img);
+$strHTML = <<<'eof'
+<table id="tbl_list" cellspacing="0" cellpadding="0" class="demo">
+            <thead>
+            <tr>
+                <th scope="col" class="f-weight"><input type="checkbox" name="btn_on_check" id="btn_on_check" value="all" ></th>
+                <th scope="col" class="f-weight">備品<br>タイプ</th>
+                <th scope="col" class="f-weight"><a href="#" id="sort" name="keisokuki" param="{$sort_keisokuki_img}">備品名</a></th>
+            </tr>
+            </thead>
+eof;
+//↑提示のソースはそのままPHP関数が埋め込んであったので少し修正しています。
+～～～中間部分は省略しています（kei344さん指摘の部分はきちんと直してください）
+$strHTML .= <<<'eof'
+    </tbody>
+</table>
+eof;
+//↑提示のソースには</html>がありましたがこれは不要なので除外
+$output = array (
+        'total_page' => ceil($datanum / $page_disp_kensu),
+        'text' => $strHTML
+);
+echo json_encode($output);
+```
 実際にJavaScriptなりCSSなりが効いて動作を行うのは呼び出しもとであるichiran.php側で行われるべき。
 つまり下記はichiran.phpに書く。
@@ -110,7 +180,7 @@
 　導入したいプラグインはどちらのバージョンが対応しているか確認して統一すべき
-- 親に様々なjQueryプラグインが読み込まれているて、干渉しあっている可能性がある。
+- 親に様々なjQueryプラグインが読み込まれているので、干渉しあっている可能性がある。
 　ブラウザの開発ツールのコンソールでエラー出てませんか？