質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

13707閲覧

Ajax後のJavascript・jQueryの再読み込みはどうするの?

behoimi80

総合スコア62

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/01/17 06:25

編集2018/01/17 07:26

Ajaxで画面のtableリストを更新しています。
ただし、そのtableリストにはjQueryプラグインのページネーション(Table Pagination)が付いており、Ajax後、その処理が行われません。

再読み込みをするにはどうしたら良いのでしょうか?

jQueryプラグイン
http://www.skuare.net/test/jtablePagination.html

html テーブル

<table id="list"> <thead> <tr> <th>名前</th> <th>住所</th> <th>個数</th> </tr> </thead> <tbody id ="select"> </tbody> </table>

javascript

// ボタンを押された際 function makeSelectNouka(vID){ var params = {}; params['ID'] = vID; $.post('library/ajaxServer.php', params, function(res){ $('#select').html(res); },'json'); } // Table Pagination関連付け $(document).ready(function() { var options = { currPage : 1, //最初に表示するページ optionsForRows : [1,5,10], //表示する行数 rowsPerPage : 5 //デフォルト表示行数 } $('#list').tablePagination(options); });

tablePagination.0.5.min

var c={firstArrow:(new Image()).src="./images/first.gif",prevArrow:(new Image()).src="./images/prev.gif",lastArrow:(new Image()).src="./images/last.gif",nextArrow:(new Image()).src="./images/next.gif",rowsPerPage:5,currPage:1,optionsForRows:[5,10,25,50,100],ignoreRows:[],topNav:false};b=a.extend(c,b);return this.each(function(){var s=a(this)[0];var h,f,l,i,j,u,q;h="#tablePagination_totalPages";f="#tablePagination_currPage"; : : function(w){n(v)});a(s)[r]().find(f).bind("change",function(w){n(this.value)});a(s)[r]().find(l).bind("change",function(w){c.rowsPerPage=parseInt(this.value,10);v=e();n(1)})})}})(jQuery);

ajaxServer.php

: : $data .= "<tr> ~ </tr>" $data .= "<td> ~ </td>" header("Content-Type: text/javascript; charset=utf-8"); echo json_encode($data);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masaya_ohashi

2018/01/17 06:36

ajaxで取ってくるのは<table>タグそのものですか?それともテーブル内のデータだけですか?
behoimi80

2018/01/17 06:46

テーブルの中になります。<tr>や<td>です。
masaya_ohashi

2018/01/17 06:50

お使いのページネーションのプラグインの公式ページのリンクを質問文に追加したほうがよいかと思います。
masaya_ohashi

2018/01/17 06:51

それと、ajaxで取得してテーブルにデータを入れるところも書いたほうがいいです。
behoimi80

2018/01/17 07:27

masaya_ohashi様ありがとうございます。実はシステムが古くて恐らくサービスは終わってるんじゃないかと思っています。もう少し調べてみます。
guest

回答2

0

ベストアンサー

まずご提示頂いたtablePaginationというプラグインですが、配信元が消滅しているため使用方法が不明です。なので、以下のコードは動作するかどうか不明です。

考え方としては、tablePaginationの初期化を一つの関数にします。$(document).ready時に初期化することと、ajaxのレスポンス受け取り後にも同じ処理を呼び出してみましょう。

JavaScript

1 2function setup() { 3 var options = { 4 currPage : 1, //最初に表示するページ 5 optionsForRows : [1,5,10], //表示する行数 6 rowsPerPage : 5 //デフォルト表示行数 7 } 8 $('#list').tablePagination(options); 9} 10 11// ボタンを押された際 12function makeSelectNouka(vID){ 13 var params = {}; 14 params['ID'] = vID; 15 $.post('library/ajaxServer.php', params, function(res){ 16 $('#select').html(res); 17 setup(); 18 },'json'); 19} 20 21// Table Pagination関連付け 22$(document).ready(function() { 23 setup(); 24});

ちなみに私がよく使うテーブルのレイアウト用プラグインは「DataTables」です。ソート機能やらページネーション機能やらデータのajax取得やら検索やら、なにかと多機能です。

投稿2018/01/17 07:35

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

behoimi80

2018/01/17 07:50

masaya_ohashi様ありがとうございます。 やってみましたが、ダメでした。(1ページに全ての列が表示される現象) DataTable軽くていいですね。古いシステムでこのtableを7箇所ぐらい使っているんです(><) もう少し調べて、乗り換えの作業時間も考慮して今後を検討したいと思います。
behoimi80

2018/01/17 07:56

すみません!入力ミスでjavascriptがエラーになっており、修正したら出来ました!!! 本当にありがとうございます!ヾ(*´∀`*)ノ
guest

0

ライブラリによるとは思いますが、ページネーション自体も別のajaxで呼んできているのであれば
tableリストを更新する処理後にページネーションのトリガーを発動させればいいでしょう。
非同期処理の同期なので$.whenやpromiseでやることになると思います

非同期処理のサンプル

  • test1はfunc1、func2の順で指定したが戻りはfunc2→func1
  • test2は$.whenで調整しているがfunc1が同期処理の順列処理に対応していないのでNG
  • test3のようにするとfunc3、func2で実行すると、func3→func2の順で返ります

javascript

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('input[type=button][value=test1]').on('click',function(){ 5 func1(); 6 func2(); 7 }); 8 $('input[type=button][value=test2]').on('click',function(){ 9 $.when(func1()).done(function(){ 10 func2(); 11 }); 12 }); 13 $('input[type=button][value=test3]').on('click',function(){ 14 $.when(func3()).done(function(){ 15 func2(); 16 }); 17 }); 18}); 19function func1(){ 20 setTimeout(function(){alert('func1');},3000); 21} 22function func2(){ 23 setTimeout(function(){alert('func2');},1000); 24} 25function func3(){ 26 var d = $.Deferred(); 27 setTimeout(function(){d.resolve();alert('func3');},3000); 28 return d.promise(); 29} 30</script> 31 32<input type="button" value="test1"> 33<input type="button" value="test2"> 34<input type="button" value="test3"> 35 36

投稿2018/01/17 06:32

編集2018/01/17 08:00
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

behoimi80

2018/01/17 07:31

yambejp様、ありがとうございます。 $.whenやpromiseを初めて聞いて調べていた為、返信が遅れました。 非同期処理の同期という意味は分かるのですが、実際にコードを書いたことが無く、上位のコードにどう追加したらいいのでしょうか?もし、時間がありましたら宜しくお願い致します。
yambejp

2018/01/17 08:00

非同期処理についてはサンプルをつけておきました 今回の件にはあまり関係なかったみたいですね 参考程度に
behoimi80

2018/01/17 08:07

yambejp様、詳しく教えて頂きありがとうございます! Ajaxを複数呼ぶという感覚が無かったので、大変勉強になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問