ロード時にデータテーブルセルに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]
コメントを追加