更新後もJQuery Mobileレスポンシブテーブルが動的に構築されたテーブルに対して機能しない

私はユーザーが表示/非表示にする列を選択できるテーブルを作成しようとしています。 JQuery(私はすでに私のサイトで使用しています)はこれをJQuery Mobileの "レスポンシブテーブル"ウィジェット、特に "列の切り替え"バリアントを通じて提供しています。

I can get this to work perfectly if I put the table in the page, so I know the files are importing and my code is correct. The problem is that this table is the result of an Ajax call, so is built inside the $.post() function and placed on the page once built. This part, too, works fine for displaying the table. However, when the table shows, it's not responsive. At least, it lacks the all-important "columns..." link. In $.post(), I construct the table like this, then append to it: resultsTable = $("<table id='resultsTable' data-role='table' data-mode='columntoggle' data-column-btn-text='Show/Hide Columns...' class='ui-responsive'></table>");

I'm thinking the problem is that jQuery Mobile can't hook into the table's creation to modify it, or for some other reason doesn't know it exists. I therefore tried refreshing it just before the end of $.post: $("#resultsTable").table("refresh");

これは効果がありません。私はいろいろな方法で 'refresh'メソッドを呼び、他の人がこの問題を抱えているかどうかを調べて、それを動かしてみました。これまでのところ結果はありません。解決策は単純でなければならないことはわかっていますが、見つけることができません。動的にテーブルを生成すること、そしてレスポンシブテーブルについてはたくさん見つけることができますが、それらを一緒に使うことについては何もできません。私はどんな提案にも感謝します。前もって感謝します。

0
resultsTable = "<table id = 'resultsTable' data-role = 'table' data-mode = 'columntoggle' data-column-btn-text = '表示/非表示...' class = ' ui-respond '> </table> ";
追加された 著者 Cesar Bielich,
resultsTable = "<table id = 'resultsTable' data-role = 'table' data-mode = 'columntoggle' data-column-btn-text = '表示/非表示...' class = ' ui-respond '> </table> ";
追加された 著者 Cesar Bielich,
これまでに試したことのあるコード例を追加するのが最善です。また、なぜこれを jquery-ui にタグ付けしたのかも定かではありません。
追加された 著者 Twisty,
Cesar、私はもともと文字列を使っていましたが、違いはありませんでした。このようにすると、テーブルの一部に追加できるようになり、コードがはるかに明確になり、保守が容易になります。さらに、$( "")の方法に切り替えることでJQueryに何か役立つものが得られるかもしれないと考えました。 @Twisty、どんなコードが好きですか?それ以外は、テーブルを構築するだけで、画面上で正しく表示されます。ありがとう。
追加された 著者 AH16,
Cesar、私はもともと文字列を使っていましたが、違いはありませんでした。このようにすると、テーブルの一部に追加できるようになり、コードがはるかに明確になり、保守が容易になります。さらに、$( "")の方法に切り替えることでJQueryに何か役立つものが得られるかもしれないと考えました。 @Twisty、どんなコードが好きですか?それ以外は、テーブルを構築するだけで、画面上で正しく表示されます。ありがとう。
追加された 著者 AH16,

4 答え

HTMLに追加する前に、 .table()を割り当てることをお勧めします。

$ .post()成功関数では、次のようになります。

var resultsTable = $("<table>", {
    'id':'resultsTable',
    'data-role':'table',
    'data-mode':'columntoggle',
    'data-column-btn-text':'Show/Hide Columns...',
    'class':'ui-responsive'
});
resultsTable.table();
resultsTable.appendTo("#results");

In this way, the element is set to be responsive before being added.

Also, refresh is not a method or event of .table(): https://api.jquerymobile.com/table/

I think you may try .table('rebuild') instead.

1
追加された

HTMLに追加する前に、 .table()を割り当てることをお勧めします。

$ .post()成功関数では、次のようになります。

var resultsTable = $("<table>", {
    'id':'resultsTable',
    'data-role':'table',
    'data-mode':'columntoggle',
    'data-column-btn-text':'Show/Hide Columns...',
    'class':'ui-responsive'
});
resultsTable.table();
resultsTable.appendTo("#results");

In this way, the element is set to be responsive before being added.

Also, refresh is not a method or event of .table(): https://api.jquerymobile.com/table/

I think you may try .table('rebuild') instead.

1
追加された

テーブルをコンテナのDOM要素に追加したら、 enhanceWithin() を呼び出します。コンテナ

$("#tableCont").empty().append(resultsTable).enhanceWithin();

デモ

デモのボタンをクリックしてテーブルを作成します。

1
追加された
ああ、それはそれでした!それがうまくいく前にresultsTable.table()への呼び出しを削除しなければなりませんでした、しかし一度それをしたなら私のリンクが現れて私の列は隠されることができました。助けてくれてありがとう!
追加された 著者 AH16,

テーブルをコンテナのDOM要素に追加したら、 enhanceWithin() を呼び出します。コンテナ

$("#tableCont").empty().append(resultsTable).enhanceWithin();

デモ

デモのボタンをクリックしてテーブルを作成します。

1
追加された
ああ、それはそれでした!それがうまくいく前にresultsTable.table()への呼び出しを削除しなければなりませんでした、しかし一度それをしたなら私のリンクが現れて私の列は隠されることができました。助けてくれてありがとう!
追加された 著者 AH16,