Create a new row in bootstrap data table

Question

For me the new row is being created, but some values are 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' 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 ' <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 that usage date USGDATE and last edit SID are not working correctly. It's showing default value when I am creating a new row.

My new row is added as 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 that last SID details need to appear, but it appears wrong. And if I trigger this function the new row is added in the middle, and this new row needs to be added at the top.

my html:

<table id="tblevent" class="table table-condensed table-hover table-striped table-bordered">
</table>

Three details need to change:

usage date column
last SID need to change

Gyrocode.com · Accepted Answer · 2015-07-05 16:03:32Z

1

You should add actual data and not <td></td> elements. For 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 and display <input> elements in the cell, use mRender callback for those columns similarly to how you use it for SID column.

answered Jul 5, 2015 at 16:03

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Louys Patrice Bessette Over a year ago

See DataTables documentation for more details...

Collectives™ on Stack Overflow

Create a new row in bootstrap data table

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related