データテーブル行にボタンを動的に追加

モーン

ロード時にデータテーブルセルにHTMLのカスタムビットを追加するときに問題が発生します。

タブをクリックしてページを開くと、ajax関数を呼び出してデータをフェッチします。

// CLICK on the tab to open the User Manager -> Load all records into DataTable
    $("#admin_details").click(function(){
        // Send through the function to perform in the $_GET variable
        $.ajax({
            url: './inc/AdminScripts.php?argument=loadAllRecords'
        })
            .done(function(html) {
                var t = $('#users_table').DataTable();
                t.clear();
                var obj = eval(html);

                // ADD acquired data items to the DataTable
                $.each(obj, function(key,value) {
                    t.row.add( [
                        value.edit,
                        value.name,
                        value.surname,
                        value.username,
                        value.email,
                        value.language,
                        value.securityQuestion,
                        value.securityAnswer,
                        value.administrator,
                        value.status,
                        value.id
                    ] ).draw();
                });
                addBellsWhistles();
            })
    });

このビットは正常に機能し、必要なすべてのデータを取得します。問題は、レコードを編集EDITするICON BUTTONためにクリックする列を追加したいということです私はaddBellsWhistlesこのような関数を使用してそうします

    function addBellsWhistles(){
        $('#users_table tr').children("td:nth-child(1)").append("<div class='col1d'><button class='editBut'><img src='img/property32.png'></button></div>");
    }

さて、これも1つのことを除いてほぼ完全に機能します。データテーブルには1ページあたり10レコードしか表示されないため、2ページ目またはnページ目に移動すると、カスタムで追加されたHTMLの一部が表示されません。

私は(を含むだけでなく、かなりの数の事のpaginateボタンをクリックするだけで、次の試してみましたclass、のボタンをid、ボタンのa tagボタンの)何も動作します。

deligation動的に作成されたデータのため、この場合も使用しています

例えば

    $( ".dataTables_paginate a" ).on( 'click', '.paginate_button', function () {
        console.log('paging');
        $(".confirmUploadError .confirm_text").html("Loading records. Please wait.");
        $(".confirmUploadError").fadeIn(250).delay(300).fadeOut(650);
        addBellsWhistles();
    });

コンソールに書き込まない、メッセージポップアップを呼び出さない、特に関数を呼び出さない(そして劇的な効果のために別々に名前を付けただけです)。

誰か私にアイデアがありますか?

PSは、datatablesによって作成されたdatatablepaginateコンテナです。

       <div class="dataTables_paginate paging_simple_numbers" id="users_table_paginate">
           <a class="paginate_button previous disabled" aria-controls="users_table" data-dt-idx="0" tabindex="0" id="users_table_previous">Previous</a>
               <span>
                   <a class="paginate_button current" aria-controls="users_table" data-dt-idx="1" tabindex="0">1</a>
                   <a class="paginate_button " aria-controls="users_table" data-dt-idx="2" tabindex="0">2</a>
               </span>
           <a class="paginate_button next" aria-controls="users_table" data-dt-idx="3" tabindex="0" id="users_table_next">Next</a>
       </div>
モーン

fnCreatedRowすべての行が作成された後に起動する関数を呼び出します(コールバック)。そこからメソッドを呼び出して、必要なことを実行します。この場合:

   $('#users_table').dataTable( {
       "fnCreatedRow": function( nRow, aData, iDataIndex ) {
           $('td:eq(0)', nRow).append("<div class='col1d'><button class='editBut'><img >src='img/property32.png'></button></div>");
       },
   });

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

1行に複数のカスタムボタンを動的に追加するにはどうすればよいですか?[JQueryデータテーブル]

分類Dev

JQueryはテーブル行にボタンを追加します

分類Dev

jQuery:「追加」ボタンをクリックすると動的にテーブル行を追加します

分類Dev

.Net-実行時にASPXのテーブルにASPボタンを動的に追加する

分類Dev

Jqueryデータテーブルに動的に行を追加できません

分類Dev

ボタンasp.netVBを使用してデータテーブルに行を追加しますか?

分類Dev

データテーブルVb.NETを使用してGridviewにボタン付きの新しい行を追加

分類Dev

データテーブルに追加データを表示するボタンを追加します

分類Dev

データを動的に追加するHTML5テーブル行

分類Dev

c#自動インクリメント列を持つデータテーブルに行を追加する

分類Dev

HTMLテーブルに行を追加するボタンは、自動計算機能を壊します

分類Dev

データテーブルの行が空の場合にボタンを表示

分類Dev

データテーブルにデータエクスポートボタンを追加する方法

分類Dev

データテーブルに削除ボタンと編集ボタンを追加する

分類Dev

テキストボックスフィールドASP.NETを使用してデータテーブルに動的に行を追加する方法

分類Dev

テーブルから行を削除するボタンを動的に作成する

分類Dev

データテーブルのボタン名に選択フィルターを追加する方法

分類Dev

テーブルのすべての行の横にボタンを追加する

分類Dev

テーブル行送信ボタンに識別子を追加する方法

分類Dev

Angular 7:マテリアルデータテーブルに行を動的に追加します

分類Dev

Djangoデータテーブルに行IDを追加します

分類Dev

データテーブルの行にIDを追加する

分類Dev

JQueryデータテーブルに行スパンを追加する方法

分類Dev

ボタンを使用してテーブルビューにセルを動的に追加する方法

分類Dev

テーブルセル内のボタンを中央に移動

分類Dev

この行のボタンを使用してデータテーブルにクラス行を追加するにはどうすればよいですか?

分類Dev

特定の列を編集できるように、データテーブルにボタンを追加する方法

分類Dev

データを含むテーブルに自動インクリメンタルID列を追加する方法

分類Dev

JavaScriptを使用してOnClickボタンにテーブル行を追加し、Laravelのデータベースに保存します

Related 関連記事

  1. 1

    1行に複数のカスタムボタンを動的に追加するにはどうすればよいですか?[JQueryデータテーブル]

  2. 2

    JQueryはテーブル行にボタンを追加します

  3. 3

    jQuery:「追加」ボタンをクリックすると動的にテーブル行を追加します

  4. 4

    .Net-実行時にASPXのテーブルにASPボタンを動的に追加する

  5. 5

    Jqueryデータテーブルに動的に行を追加できません

  6. 6

    ボタンasp.netVBを使用してデータテーブルに行を追加しますか?

  7. 7

    データテーブルVb.NETを使用してGridviewにボタン付きの新しい行を追加

  8. 8

    データテーブルに追加データを表示するボタンを追加します

  9. 9

    データを動的に追加するHTML5テーブル行

  10. 10

    c#自動インクリメント列を持つデータテーブルに行を追加する

  11. 11

    HTMLテーブルに行を追加するボタンは、自動計算機能を壊します

  12. 12

    データテーブルの行が空の場合にボタンを表示

  13. 13

    データテーブルにデータエクスポートボタンを追加する方法

  14. 14

    データテーブルに削除ボタンと編集ボタンを追加する

  15. 15

    テキストボックスフィールドASP.NETを使用してデータテーブルに動的に行を追加する方法

  16. 16

    テーブルから行を削除するボタンを動的に作成する

  17. 17

    データテーブルのボタン名に選択フィルターを追加する方法

  18. 18

    テーブルのすべての行の横にボタンを追加する

  19. 19

    テーブル行送信ボタンに識別子を追加する方法

  20. 20

    Angular 7:マテリアルデータテーブルに行を動的に追加します

  21. 21

    Djangoデータテーブルに行IDを追加します

  22. 22

    データテーブルの行にIDを追加する

  23. 23

    JQueryデータテーブルに行スパンを追加する方法

  24. 24

    ボタンを使用してテーブルビューにセルを動的に追加する方法

  25. 25

    テーブルセル内のボタンを中央に移動

  26. 26

    この行のボタンを使用してデータテーブルにクラス行を追加するにはどうすればよいですか?

  27. 27

    特定の列を編集できるように、データテーブルにボタンを追加する方法

  28. 28

    データを含むテーブルに自動インクリメンタルID列を追加する方法

  29. 29

    JavaScriptを使用してOnClickボタンにテーブル行を追加し、Laravelのデータベースに保存します

ホットタグ

アーカイブ