jquery - Create a new row in bootstrap data table -
for me new row being created, values wrong.
my jquery datatables list:
$.ajax({ url: '@url.action("loadeventchargesbyutility", "vendor")', contenttype: "application/json; charset=utf-8", datatype: "json", data: "{'stayid':'" + stayi + "','datetime':'" + datetime + "','groupid':'" + groupid + "'}", type: "post", // 'get' or 'post' ('get' default) success: function (data) { data = json.parse(data); if (data != "no items") { $('#tblevent').datatable({ "spaginationtype": "full_numbers", "aadata": data, "bautowidth": false, "bdeferrender": true, "destroy": true, "aocolumns": [ { "mdata": "servicetext", 'stitle': 'service name' }, { "mdata": "itemname", 'stitle': 'item name' }, { "mdata": "usgdate", 'stitle': 'usage date', 'bsortable': false, 'bsearchable': false, 'mrender': function (data, type, full) { return moment(data).format('dd/mm/yyyy'); } }, //{ // "mdata": "insdate", 'stitle': 'insert date', 'bsortable': false, 'bsearchable': false, 'mrender': function (data, type, full) { // return moment(data).format('ll'); // } //}, { "mdata": "quantity", 'stitle': 'quantity' }, { "mdata": "unittext", 'stitle': 'unit' }, { "mdata": "rate", 'stitle': 'rate' }, { "mdata": "amount", 'stitle': 'amount' }, { "mdata": "sid", 'stitle': 'edit', 'bsortable': false, 'bsearchable': false, 'mrender': function (data, type, full) { //return ' <div class="hidden-sm hidden-xs action-buttons"><a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130" onclick="return getservicecharge(\'' + data + '\');"></i></a></div>'; return ' <div class="hidden-sm hidden-xs action-buttons"><a class="green" href="#"><i class="ace-icon fa fa-pencil bigger-130" onclick="return editeventdetails(this);"></i></a></div>'; } } ] }); $('#eventdeatils').modal(); } else { $('#tblevent >thead').remove(); $('#tblevent >tbody').remove(); var tr = '<tr><td>no records</td></tr>'; $('#tblevent >tbody').remove(); $('#tblevent').append(tr); } }, error: function (xhr, status, error) { var err = eval("(" + xhr.responsetext + ")"); alert(err.message); } });
in usage date usgdate
, last edit sid
not working correctly. it's showing default value when creating new row.
my new row added follow:
var t = $('#tblevent').datatable(); t.row.add({ "servicetext": "<td >service</td>", "itemname": "<td>item</td>", "usgdate": "<td>date</td>", "quantity": "<td><input type=\"text\" class=\"txtdtedit\" style=\"width: 52px;\" value=\"\" /></td>", "unittext": "<td><select id=\"ddlupdateunit\" style=\"width: 73px;\" ></select></td>", "rate": "<td><input type=\"text\" class=\"txtdtedit\" style=\"width: 52px;\" value=\"\" /></td>", "amount": "<td><input type=\"text\" class=\"txtdtedit\" style=\"width: 52px;\" value=\"\" /></td>", "sid": "<td style=\"width:80px\"><div class=\"hidden-sm hidden-xs action-buttons\"><a class=\"green\" href=\"#\"><i class=\"ace-icon fa fa-check bigger-120\" onclick=\"return updaterowdata(this);\"></i></a></div></td>" }).draw().node();
in last sid
details need appear, appears wrong. , if trigger function new row added in middle, , new row needs added @ top.
my html:
<table id="tblevent" class="table table-condensed table-hover table-striped table-bordered"> </table>
three details need change:
- usage date column
- last
sid
need change
you should add actual data , not <td></td>
elements. example,
var t = $('#tblevent').datatable(); t.row.add({ "servicetext": "service name", "itemname": "item name", "usgdate": "1995-12-25", "quantity": "1", "unittext": "2", "rate": "3", "amount": "4", "sid": "5" }).draw();
to render cell content , display <input>
elements in cell, use mrender
callback columns how use sid
column.
Comments
Post a Comment