php・jQuery・SQLを勉強し始めて3ヶ月の初心者です。
phpとjQueryを使用してDBのデータをajaxを利用してテーブルに表示させるプログラムを作成しています。
テーブルはjQueryのプラグインtablesorterを使用してソートさせています。
構成
table.php(テーブル表示ページ)
tablePost.php(ajax送信後、table.phpに表示したいテーブルがあるページ)
jquery.tablesorter.min.js
やりたいこと:
テーブルの一番左の列は行番号(昇順 1→10)として、ソートさせずに固定したい。
やったこと:
1)オプションのソート無効指定では、行番号列のクリックは無効になるが、別の列がソートされると一緒にソートされる。(当たり前ですが…)
2)ソート処理の後に連番を再表示させようと$.when
.done
で実行順を指定して処理を試みるが何も起きない
3)#sortTable
のth
が押されたら連番を再表示しようと試みるが、1回目のth
クリックでソートされ、2回目のクリックで降順(10→1)になってしまう。
4)テーブルのth
クリックではなく、外側にソートボタンを付けると行番号の再表示に成功するが、th
クリックで実現したい。
5)jquery.tablesorter.min.js
を直接編集しようとしたが、どこに記述してよいやら分からず…
考え方、ヒントなどご教授いただければ幸いです。
php
1 2teble.php 3 4<table id="sortTable" class="tablesorter"> 5 <thead> 6 <tr> 7 <th>行番号</th> 8 <th>名前</th> 9 <th>データ01</th> 10 <th>データ02</th> 11 </tr> 12 </thead> 13 <?php 14 // データベースから値を取り出す 15 foreach ($stmto as $row) 16 { 17 //処理 18 ?> 19 <tr> 20 <td class="lineNum"></td> 21 <td><?=h($名前)?></td> 22 <td><?=h($データ01)?></td> 23 <td><?=h($データ02)?></td> 24 </tr> 25 <?php } ?> 26</table> 27 28<!--========================================--> 29 30<script> 31$(function() 32{ 33 //連番を表示 34 $('.lineNum').each(function (i) 35 { 36 i = i+1; 37 $(this).text(i); 38 }); 39 //ソート実行 40 $("#sortTable").tablesorter( 41 { 42 headers: 43 { 44 0:{sorter:false}, 45 1:{sorter:false} 46 } 47 }); 48}); 49</script>
試した処理:
//2)-------------------------------------------------------- $(function() { $.when( //連番を表示 $('.lineNum').each(function (i) { i = i+1; $(this).text(i); }), //ソート実行 $("#sortTable").tablesorter( { headers: { 0:{sorter:false}, 1:{sorter:false} } }) ) .done(function() { //連番を再表示 $('.lineNum').each(function (i) { i = i+1; $(this).text(i); }); }); }); //3)-------------------------------------------------------- $(function() { //連番を表示 $('.lineNum').each(function (i) { i = i+1; $(this).text(i); }); //ソート実行 $("#sortTable").tablesorter( { headers: { 0:{sorter:false}, 1:{sorter:false} } }); $(document).on('click','#sortTable th',function() { //ソートされても順位を再表示 $('.lineNum').each(function (i) { i = i+1; $(this).text(i); }); }); }); コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。