删除的行在添加新行DataTable时显示

嗨，我是DataTables的新手….我有一个数据表，我想在其中添加行（一次一个），并具有多行删除function。 我设法让正常的function工作，但问题是，当我删除一行/行然后尝试添加一个新行时，删除的行显示回与所选行相同的位置….下面是代码我我正在使用初始化DataTable和在我的DataTable中添加和删除行的function….任何帮助将不胜感激…

$(document).ready(function (){ var counter = 1 $('#addRow').on( 'click', function (a,b,c,d,e,f) { a = "test" t.row.add( [ counter +a, counter +'test', counter +'test', counter +'test', counter +'test', counter +'test' ] ).draw(false); counter ++; } ); $('#example tbody').on( 'click', 'tr', function (e) { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); $(this).css('background-color', '') } else { t.$('tr.selected');//.removeClass('selected'); $(this).addClass('selected'); $(this).css('background-color', 'blue'); } } ); $('#removeRow').click( function () { var anSelected = fnGetSelected( t ); $(anSelected).remove(); } ); var t = $('#example').DataTable({ 'fnCreatedRow': function (nRow, aData, iDataIndex) { $(nRow).attr('id', 'my' + iDataIndex); }, "aoColumnDefs": [ { "aTargets": [0,1,2,3,4,5], "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { var idx = t.cell( nTd ).index().column; var title = t.column( idx ).header(); $(nTd).attr("id",$(title).html() +"_"+ iRow) } } ] }); }); function fnGetSelected( oTableLocal ) { return oTableLocal.$('tr.selected'); } 

上面的代码只是用一些不需要的东西测试function….

****更新post****表格html是用模板写的，我在表格中调用…表格代码的父gsp文件在……下面

主要的gsp文件

    
 
 
   Add new row Remove Selected Row 
 
 
  

模板html代码如下

 
 
 
 
  Travel Details 
   
 
 
 
 
 
 
Departure Date
 
Return Date
 
Departure Destination
 
Arrival Destination
 
Choose Mode Of Transport
 
Cost of Travel
 
 
 
 
 
 
Departure Date
 
Return Date
 
Departure Destination
 
Arrival Destination
 
Choose Mode Of Transport
 
Cost of Travel
 
 
 
 
 
 
  

初始化DataTable的主文件中更新的javascript代码如下所示…这也有添加和删除行的函数定义

 $(document).ready(function (){ var counter = 1 $('#addRow').on( 'click', function () { t.row.add( [ $('#departureDate_1').val(), $('#returnDate_1').val(), $('#startDestination').val(), $('#endDestination').val(), $('#travelMode').val(), $('#travelFare').val(), ] ).draw(false); counter ++; $('#detailsModal').modal('hide'); } ); $('#example tbody').on( 'click', 'tr', function (e) { if ( $(this).hasClass('selected') ) { $(this).removeClass('selected'); $(this).css('background-color', '') } else { t.$('tr.selected');//.removeClass('selected'); $(this).addClass('selected'); $(this).css('background-color', 'blue'); } } ); $('#removeRow').click( function () { var anSelected = fnGetSelected( t ); $(anSelected).remove(); } ); var t = $('#example').DataTable({ 'fnCreatedRow': function (nRow, aData, iDataIndex) { $(nRow).attr('id', 'my' + iDataIndex); $(nRow).attr('name', 'my' + iDataIndex); // or whatever you choose to set as the id }, "aoColumnDefs": [ { "aTargets": [0,1,2,3,4,5], "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) { var idx = t.cell( nTd ).index().column; var title = t.column( idx ).header(); $(nTd).attr("name",$(title).html() +"_"+ iRow) $(nTd).attr("id",$(title).html() +"_"+ iRow) } } ] }); $('#departureDate').on('change',function (){ $('.bootstrap-datetimepicker-widget').css('display','none'); }); $('#returnDate').on('change',function (){ $('.bootstrap-datetimepicker-widget').css('display','none'); }); $('#departureDate').datetimepicker({ format: 'YYYY-MM-DD', pick12HourFormat: false, autoclose: true }); $('#returnDate').datetimepicker({ format: 'YYYY-MM-DD', pick12HourFormat: false, autoclose: true }); }); function fnGetSelected( oTableLocal ) { return oTableLocal.$('tr.selected'); } 

提前致谢

Answer 1

尝试

  $(anSelected).remove().draw(false); 

现在，您只需在添加新行后重绘表格。 正如draw（）文档所述 ：

大多数DataTables API操作不会自动执行绘制以允许对操作进行分组（例如，如果对其进行分组，则添加多行会更有效。

一个很好的选择是在批量删除行后绘制。

Answer 2

感谢您阅读我的问题，并花时间回答它，我找到了解决方案……以下是可以在其他场景中使用的代码….

 $('#removeRow').click(function() { var anSelected = fnGetSelected(t); alert(anSelected); t.row(anSelected).remove().draw(false); }); function fnGetSelected(oTableLocal) { return oTableLocal.$('tr.selected'); }