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

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

2 个答案: