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:

  1. usage date column
  2. 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

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -