Question

I’m using the plugin this for Adding a new record. In this example while clicking ‘Add’ Button, a subform opens with the fields in the table. And on clicking ok in the subform a new editable row is created in the table with the values mentioned in subform.
But I need to add a editable row without opening the subform. And the user has to enter the values in the table.
This code is used to add a row from the subform in “jquery.dataTables.editable.js” file.

///Event handler called when a new row is added and response is returned from server
        function _fnOnRowAdded(data) {
            properties.fnEndProcessingMode();

            if (properties.fnOnNewRowPosted(data)) {

                var oSettings = oTable.fnSettings();
                var iColumnCount = oSettings.aoColumns.length;
                var values = new Array();

                $("input:text[rel],input:radio[rel][checked],input:hidden[rel],select[rel],textarea[rel],span.datafield[rel]", oAddNewRowForm).each(function () {
                    var rel = $(this).attr("rel");
                    var sCellValue = "";
                    if (rel >= iColumnCount)
                        properties.fnShowError("In the add form is placed input element with the name '" + $(this).attr("name") + "' with the 'rel' attribute that must be less than a column count - " + iColumnCount, "add");
                    else {
                        if (this.nodeName.toLowerCase() == "select" || this.tagName.toLowerCase() == "select")
                            sCellValue = $("option:selected", this).text();
                        else if (this.nodeName.toLowerCase() == "span" || this.tagName.toLowerCase() == "span")
                            sCellValue = $(this).html();
                        else
                            sCellValue = this.value;

                        sCellValue = sCellValue.replace(properties.sIDToken, data);
                        values[rel] = sCellValue;
                    }
                });

                //Add values from the form into the table
                var rtn = oTable.fnAddData(values);
                var oTRAdded = oTable.fnGetNodes(rtn);
                //Apply editable plugin on the cells of the table
                _fnApplyEditable(oTRAdded);
                //add id returned by server page as an TR id attribute
                properties.fnSetRowID($(oTRAdded), data);
                //Close the dialog
                oAddNewRowForm.dialog('close');
                $(oAddNewRowForm)[0].reset();
                $(".error", $(oAddNewRowForm)).html("");

                _fnSetDisplayStart();
                properties.fnOnAdded("success");
            }
        }

I edited the above code to add a row without open the subform. But the added row is not editable. What changes should i do to make it editable?

Answer 1

Use fnAddData to add rows and then make that row editable. Here’s an example which shows how to make the row editable.

Untested code to add a row(taken from the jquery datatables docs)

var giCount = 2;

$(document).ready(function() {
  $('#example').dataTable();
} );

function fnClickAddRow() {
  $('#example').dataTable().fnAddData( [
    giCount+".1",
    giCount+".2",
    giCount+".3",
    giCount+".4" ]
  );

  giCount++;
}

EDIT 2: Here’s the fiddle.

var oTable = $("table").dataTable();

$("a").click(function() {
    $(oTable).dataTable().fnAddData( ["test"] );
});

$('td', oTable.fnGetNodes()).editable(function(v, s) {
    console.log(v);
    return (v);
});

Note that you will require jEditable for this.

Cheers!