Créer une nouvelle ligne dans la table de données bootstrap

Pour moi, la nouvelle ligne est en cours de création, mais certaines valeurs sont fausses.

Ma liste de jQuery DataTables:

$.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' is the 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 ' '; return ' '; } } ] }); $('#EventDeatils').modal(); } else { $('#tblevent >thead').remove(); $('#tblevent >tbody').remove(); var tr = 'No Records'; $('#tblevent >tbody').remove(); $('#tblevent').append(tr); } }, error: function (xhr, status, error) { var err = eval("(" + xhr.responseText + ")"); alert(err.Message); } }); 

Dans cette date d’utilisation, USGDATE et la dernière édition de SID ne fonctionnent pas correctement. Cela montre la valeur par défaut lorsque je crée une nouvelle ligne.

Ma nouvelle ligne est ajoutée comme suit:

 var t = $('#tblevent').DataTable(); t.row.add({ "SERVICETEXT": "service", "ITEMNAME": "item", "USGDATE": "date", "QUANTITY": "", "UNITTEXT": "", "RATE": "", "AMOUNT": "", "SID": "" }).draw().node(); 

Dans ce dernier SID détails doivent apparaître, mais cela semble faux. Et si je déclenche cette fonction, la nouvelle ligne est ajoutée au milieu et cette nouvelle ligne doit être ajoutée en haut.

mon html:

 

Trois détails doivent changer:

  1. colonne de date d’utilisation
  2. dernier SID à changer

Vous devez append les données réelles et non les

éléments. Par exemple,

 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(); 

Pour restituer le contenu de la cellule et afficher éléments dans la cellule, utilisez le rappel mRender pour ces colonnes de la même manière que pour la colonne SID .