Issue
I use the boostable plugin to edit HTML rows inline on runtime. The plugin is on https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html. The problem is now when I want to dynamically add new rows to the table, I am not able to re-initialize the table or refresh so as to make all rows Bootstable(editable)
After adding /assets/plugins/editable/bootstable.js"> The following code is the one I use ti initialize the table
$('#tbl_deposists').SetEditable({
columnsEd: "1",
onEdit: function() {},
onDelete: function() {},
onBeforeDelete: function() {},
onAdd: function() {}
});
The following code is the one I use to add extra rows on runtime
$("#add_deposit").click(function(){
var name = $("#deposit_name").val();
var amount = $("#deposit_amount").val();
var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td></tr>";
$("#tbl_deposists tbody").append(markup);
});
Solution
I will suggest this . The initialize will look like below, you can set the button. This will automatically add the new row. You can add your other settings like columnsEd while initializing, but the example show how can you tell bootstable which button to use to add new rows.
$('#tbl_deposists').SetEditable({ $addButton: $('#add_deposit')});
button can look like this
<button class="btn btn-info" id="add"><span class="glyphicon glyphicon-plus-sign"></span>Add</button>
EDITED : I tried this and looks like this works. You can actually put the html for last TD and everything will work, I mean edit, delete etc.
$("#add_deposit").click(function(){
var name = $("#deposit_name").val();
var amount = $("#deposit_amount").val();
var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td><td name='buttons'><div class='btn-group pull-right'><button id='bEdit' type='button' class='btn btn-sm btn-default' onclick='rowEdit(this);'><span class='glyphicon glyphicon-pencil'> </span></button><button id='bElim' type='button' class='btn btn-sm btn-default' onclick='rowElim(this);'><span class='glyphicon glyphicon-trash'> </span></button><button id='bAcep' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowAcep(this);'><span class='glyphicon glyphicon-ok'> </span></button><button id='bCanc' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowCancel(this);'><span class='glyphicon glyphicon-remove'> </span></button></div></td></tr>";
$("#tbl_deposists tbody").append(markup);
});
Answered By - A Paul
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.