我在加载时向数据表单元格添加自定义 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>"); }
好吧,除了一件事,这也几乎完美地工作。数据表每页只显示 10 条记录,所以当我转到第 2 页或第 n 页时,自定义添加的 HTML 片段是不可见的。
我在点击分页按钮时尝试了以下操作(还有很多东西,包括按钮的 class
、按钮的 id
、按钮的标签
)但没有任何作用。
在这种情况下,由于动态创建的数据,我还使用了 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创建的datatable分页容器
<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>"); }, });
关于jquery - 动态添加按钮到数据表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25017348/