删除的行在添加新行 DataTables 时重新出现

Question

您好，我是 DataTables 的新手....我有一个数据 table，我想在其中添加行（一次一个）并具有多行删除的能力。我已经设法使正常功能正常工作，但问题是当我删除 row/rows 然后尝试添加新行时，删除的行出现在与所选行相同的位置....下面是我用来初始化 DataTable 的代码以及在我的 DataTable 中添加和删除行的功能....任何帮助将不胜感激...

            $(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');
         }

上面的代码只是为了测试一些不需要的功能....

**** post 更新 **** table html 是用我在表单中调用的模板编写的...带有表单代码的父 gsp 文件在下面.....

主 gsp 文件

    <g:form action="saveTravelDetails" id="createRequest" name="createRequest" autocomplete="off">                       
<g:render template="newTravelRequest" />
<div class="row">
    <div class="col-md-12">
        <div class="form-group" style="text-align: center;">
            <input id="circuit_save" class="btn btn-primary circuit_validate" tabindex="700" class="button_text" type="submit" name="circuit_save" value="Save" />
            <input id="circuit_cancel" class="btn btn-default" class="button_text" type="button" name="circuit_cancel" value="Cancel" />
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#detailsModal">Add new row</button>
            <button type="button" class="btn btn-primary" id="removeRow">Remove Selected Row</button>
        </div>
    </div>
</div>
</g:form>

模板html代码在下面

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-user"></i> Travel Details
                <div class="panel-tools">
                    <a href="#" class="btn btn-xs btn-link panel-collapse collapses">
                    </a>
                </div>
            </div>
            <div class="panel-body">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
              <thead class="alignCenter">
                 <tr>
          <th class="headerclass">Departure Date</th>
          <th class="headerclass">Return Date</th>
          <th class="headerclass">Departure Destination</th>
          <th class="headerclass">Arrival Destination</th>
          <th class="headerclass">Choose Mode Of Transport</th>   
          <th class="headerclass">Cost of Travel</th>        
                 </tr>
              </thead>
              <tbody></tbody>
              <tfoot  class="alignCenter headerclass">
                 <tr>
          <th class="headerclass">Departure Date</th>
          <th class="headerclass">Return Date</th>
          <th class="headerclass">Departure Destination</th>
          <th class="headerclass">Arrival Destination</th>
          <th class="headerclass">Choose Mode Of Transport</th>   
          <th class="headerclass">Cost of Travel</th>       
                 </tr>
              </tfoot>
              </table>

            </div>
        </div>
    </div>
</div>

主文件中初始化 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);

就像现在一样，您只需在添加新行后重绘 table。正如 draw() docs 所述：

A draw is not performed automatically by most DataTables API actions to allow grouping of actions (for example adding multiple rows is more efficient if you group them.

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

Answer 2

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

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

function fnGetSelected(oTableLocal) {
    return oTableLocal.$('tr.selected');
}

删除的行在添加新行 DataTables 时重新出现

Deleted Rows appear back upon adding new row DataTables

jquery

datatables

datatables-1.10