删除的行在添加新行数据表时出现

Question

您好，我是 DataTables 的新手......我有一个数据表，我想在其中添加行（一次一个）并具有多行删除功能。我已经设法使正常功能正常工作，但问题是当我删除一行/行然后尝试添加新行时，删除的行会出现在与选定行相同的位置....下面是我的代码我正在使用初始化 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');
         }

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

**** 帖子更新 **** 表格 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);

现在您只需在添加新行后重新绘制表格。如draw() docs所述：

大多数 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');
}