html - how to remove jquery datatable row which is in modalForm? -
i have datatable inside modal form , want remove row of datatable when #button click after selecting of row.
<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> here javascript function can select table row not been able remove datatable.
var ocretetable; var amount; var apos; $('document').ready(function(){ ocretetable = $('#datatablecreate').datatable(); $('#datatablecreate tbody').on( 'click', 'tr', function () { apos = ocretetable.fngetposition( ); 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); } ); }); i don't want modal form close after deleting row. kindly show me best way delete datatable row.
3 simple things can put in right track:
when assign variable datatable, don't ever again initiate datatable doing in
buttonclick event. use assigned variable invoke datatable once again.the docs explicit on how can delete row datatable.
you have method makes entire row (
tr) clickable, , using id#button... i'm assuming button outside table (or can't click have event entire row... either use other type of selection (maybe checkbox) or need hold variable tells row user selected deleted
in code, like:
$('#button').click( function () { var trfordeletion = $(".datatable tr:first"); // make sure row ocretetable .row( trfordeletion ) .remove() .draw(); });
Comments
Post a Comment