Question

我有一个在Modal Form里面的数据表，我想在选择行后点击#button时删除数据行。

<div class="modal fade" id="modalForm2" role="dialog">
        <div class="modal-dialog" style="width:80%;">
        <div class="modal-content">
        <form  class="form-horizontal" method="post">
        <div class="modal-header">
        </div>
        <div class="modal-body">
        <div class="form-group">
        <label for="paymentTerm" class="col-md-2">paymentTerm</label>
        <div class="col-md-4"><input type="text" id="paymentTerm" value="" class="form-control"/></div>
        <label for="orderDate" class="col-md-2">orderDate</label>
        <div class="col-md-4"><div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
                    <input class="form-control" id="orderDate" type="text"><span class="input-group-addon"><i class="fa fa-calendar"></i></span></input>
                  </div></div>
        </div>
        <div class="form-group">
        <label for="remarks" class="col-md-2">Delivery remarks</label>
        <div class="col-md-4"><input type="text" id="remarks" value="" class="form-control"/></div>
        <label for="quantityRemarks" class="col-md-2">quantity In</label>
        <div class="col-md-4"><input type="text" id="quantityRemarks" value="" class="form-control"/></div>
        </div>
        <div class="form-group">
        <label for="descRemarks" class="col-md-2">All Item Remark</label>
        <div class="col-md-4"><input type="text" id="descRemarks1" value="" class="form-control"/></div>
        <label for="descRemarks2" class="col-md-2">All Item Remark2</label>
        <div class="col-md-4"><input type="text" id="descRemarks2" value="" class="form-control"/></div>
        </div>

        <div class="form-group">
         <div class="heading">
       <i class="fa fa-table"></i>Item List<a class="btn btn-sm btn-primary-outline pull-right" id="add-item"data-toggle="modal" data-target="#" onclick="ClickAddItem(this)"><i class="fa fa-plus"></i>Add Item</a>
       <Button id="button" class="btn btn-sm btn-primary-outline pull-left" ><i class="fa fa-plus"></i>Remove Item</Button>       
                  </div>
         <table class="table table-bordered table-striped" id="dataTableCreate">
                      <thead>
                        <th id="aoColumnDefs">
                        Item
                        </th>

                        <th>
                         Description
                        </th>
                        <th class="hidden-xs">
                           Code Remark
                        </th>

                        <th class="hidden-xs">
                         Rate
                         </th>
                        <th class="hidden-xs">
                          Quantity 
                        </th>
                        <th id="Amount">
                        Amount
                        </th>

                      </thead>
                      <tbody>

                      </tbody>

                    </table>

        </div>

         <div class="form-group" id ="errors">
          </div>
         </div>
          <div class="modal-footer">
         <!-- <a class = "btn btn-default" data-dismiss = "modal">Close</a> -->
         <a class = "btn btn-default" onclick="CloseModal2(this)">Close</a> 
         <a class = "btn btn-primary" id="btn_POcreate" href="#" onclick="ConfirmCreatepurchaseOrder(this)">Save</a> 

        </div>

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

这是一些javascript函数，我可以选择表格行，但无法从数据表中删除。

    var ocretetable;
 var amount;
 var aPos;
 $('document').ready(function(){
     ocretetable = $('#dataTableCreate').dataTable();   
        $('#dataTableCreate tbody').on( 'click', 'tr', function () {
             aPos = ocretetable.fnGetPosition( this );
            alert(aPos);
            console.log('clicked');
            if ( $(this).hasClass('selected') ) {
                $(this).removeClass('selected');
            }
            else {
                ocretetable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        } );


        $('#button').click( function () {

            $('#dataTableCreate').dataTable().fnDeleteRow(aPos); 

        } );
 });

我不希望在删除行后关闭模态表单。请告诉我删除数据表行的最佳方法。

Answer 1

可以让你走上正轨的3件简单的事情：

将变量分配给DataTable时，不要像在button点击事件中那样重新启动数据表。始终使用指定的变量再次调用DataTable。
关于如何从DataTable中删除行的docs are very explicit。
您有一种方法可以使整行（tr）可点击，并且您使用的是#button的ID ...我假设按钮在外面表格（或者您不能点击，因为您已经有整个行的事件...要么使用其他类型的选择（可能是复选框），要么需要保存一个变量，告诉您用户选择了哪一行被删除

，例如：

$('#button').click( function () {

  var trForDeletion = $(".datatable tr:first"); // make sure what row is
  ocretetable
    .row( trForDeletion )
    .remove()
    .draw();
});

如何删除modalForm中的jquery datatable行？

1 个答案: