Question

I have a datatable with lots of rows. I need to add a new row to the datatable (just client side, I want to use ajax to insert that new row in mysql). Most of the data I want to add in the columns are select-lists (which are retrived from mysql). My current add row function looks like this:

function fnAddRow() {       
var addData = {
    "sno": "<span id='txt'><img src='images/green_check.png' onClick='saveRow(this)';/><img src='images/red_cross.png' onClick='cancelEdit(this)';/></span>",       
    "project": "",
    "year": "<select name='year' id='year' ><option value='2012'>2012</option><option value='2013'>2013</option></select>",
};
oTable.fnAddData(addData); }

The data for ‘project’ should come from a mysql table. How do I add that? Please help!! Thanks in advance.

Answer 1

Try using ajax to get your project data as well:

HTML:

<input id="AddButton" type="button" />
<table id="dataTable">
    ...
</table>

JavaScript:

function fnGetProjectFromMySQL() {
    var projectHTML;
    $.ajax({
        url: "code/getMySQLData.php",
        success: function (mySqlData) {
            //Build your project html here using mySQLData
            projectHTML = "";
        }
    });
    return projectHTML;
}

function fnAddRow(oTable) {       
    var addData = {
        "sno": "<span id='txt'><img src='images/green_check.png' onClick='saveRow(this)';/><img src='images/red_cross.png' onClick='cancelEdit(this)';/></span>",       
        "project": fnGetProjectFromMySQL(),
        "year": "<select name='year' id='year' ><option value='2012'>2012</option><option value='2013'>2013</option></select>"
    };
    oTable.fnAddData(addData); 
}

$(document).ready(function () {
    var oTable = $("#dataTable").dataTable();

    $("#AddButton").click(function () {
        fnAddRow(oTable);
    });
});

I guess there are a few different ways to get this done. Google and javascript questions on stackoverflow should find you what you need:
DataTables – How to add a row