how add row in datatable?

Question

I need add row in datatable, but the number the colums is variable.

I try two each but not run because row.add need all row not 1 to 1.

var obj = $.parseJSON(res);
       $.each(obj, function (index) {
            $.each(obj[index], function (value) {
                table.row.add([obj[index][value]]).draw();
            });
        });

Is possible add row without knowing the number of columns?

Answer 1

Edit: So If you have a variable number of columns the only way you'd be able to still use the datatable most likely is by inserting blank values into the columns of rows which don't posess the maximum amount of values, ex:

table.row.add(['a','b','c','d']).draw();
//Above is a row which has all the 4 column values
//Beneath is a row with 3 out of 4 column values
table.row.add(['a','b',null,'d']).draw() 
/*or*/ 
table.row.add(['a','b','','d']).draw()

---

I'm not quite sure where you've gotten the idea that row.add() needs all rows added at once. https://datatables.net/reference/api/row.add() according to the official documentation this method is able to add single rows to your table without any problem.

Here a JSFiddle proving that a single row can be added to the already existing ones: myTable.row.add(["Airi Satou", "This was", "added", "later", "EXAMPLE", "ITEM"]).draw(); http://jsfiddle.net/bbLjzspf/8709/

Answer 2

Firstly, there is an error in your script, perhaps a typo, there is an extra square bracket after [obj][index][value] "]".

var obj = $.parseJSON(res);
   $.each(obj, function (index) {
        $.each(obj[index], function (value) {
            table.row.add(
               [obj[index][value]  >]<-- One too many brackets   ).draw();
   });
});

Then my suggestion.

First I make two little helpers...

One to count the number of columns:

$.fn.DTbl_columnCount = function () {
    return $('th', $(this).find('thead')).length;
};

And since I've got no idea what kind of data is coming, the next one is all belts and buckles, erm, in a "whatever" version, that also accepts arrays ;)

$.fn.DTbl_createDataColumns = function (whatever) {
    var temp = new Array($(this).DTbl_columnCount());
    var value = "";
    var type = jQuery.type(whatever);
    var isArray = (type == "array");
    if (!isArray && type != undefined) 
        value = whatever;
    for (var i = 0; i < temp.length; i++) {
        if (isArray) 
            if (whatever.length > i)
                value = whatever[i];
        temp[i] = '' + value;
        value = "";
    }
    return temp;
};

And then to your problem, since these additions are not really part of DataTables we need to fetch the DataTable Id in the function call of DTbl_createDataColumns, here using the standard reference "#example".

var obj = $.parseJSON(res);
$.each(obj, function (index) {
    $.each(obj[index], function (value) {
        table.row.add(
           $("#example").DTbl_createDataColumns([obj[index][value])
        ).draw();
    });
});

So this would also work:

var myArray = ["Dodaa", "Dodee"];
table.row.add(  $("#example").DTbl_getDataColumns(myArray) );

Answer 3

table.row.add(['a','b','','d']).draw() 

didn't work for me.

I have to do

table.row.add([['a','b','','d']]).draw()

Also it is important to be consistent between data types of dictionary and array. DataTable does NOT like it if we mix dictonaries and arrays in different calls. For example we might need to do (if it is initialized with an array of dictionaries).

table.row.add([{'hdrCol1': 'a', 'hdrCol2':'b','hdrOfCol3':'', 'hdrCol4':'d'}]).draw()