Saving the datatable having the input and select elements

bhargavakl

I am using a datatable and it is a fantastic tool. I am having datatable which contain input and select elements.
Data table is generating dynamically. I am trying to edit the values in those input and select elements. But when I click the save button I am not able to get the modified data. I am getting same data as it is. I am using table.data().toArray() to get the data. I don't want to use the serialize example. Please help me with this.
Note: I am not using the datatable editor.

colin

Hi @bhargavakl ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

bhargavakl

Hey Collin, Thanks for the quick reply. Sorry I was unable to create those test cases as it is a dynamic data table (not suppose to share ). Hence I am adding my table syntax.

here is my table

$(id).DataTable({
data: response,
dom: "frt",
ordering: false,
processing: true,
serverside: true,
responsive: true,
pageLength: 100,
columns: [
{ data: "id", visible: false },
{ data: "active" },
{ data: "ba" },
{ data: "comm" },
{ data: "phy" },
{ data: "trueC" },
{ data: "thickness" },
{ data: "baseAvlCommDiam" },
{ data: "addMin" },
{ data: "addMax" },
{ data: "logCode" },
{ data: "localLogCode" },
{ data: "entityCode", "visible": false }
],
columnDefs: [
{
"targets": [1],
"render": function (data, type, row, meta) {
var val = data == 1 ? true : false;
var checkbox = '<input type="checkbox" id="eligble" class="js-switch_active_' + name + '' + row.id + '" checked=' + val + ' />';
return checkbox;
}
},
{
"targets": [2],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="number" name="value" step=".01" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [3],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="text" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [4],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="number" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [5],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="number" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [6],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="text" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [7],
"width": "20%",
"render": function (data, type, row, meta) {
var id = 'baseavailable'+ entity +'' + row.id + '';
var select = '<select class="select2_multiple form-control sfrange" id="' + id +'" multiple="multiple" style="width:100%" title="base available for comm diam">' +
'<option value="60">60</option>' +
'<option value="65">65</option>' +
'<option value="70">70</option>' +
'<option value="75">75</option>' +
'<option value="80">80</option>' +
'</select>';
return select;
}
},
{
"targets": [8],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="number" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [9],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="number" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [10],
"width": "15%",
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="number" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
},
{
"targets": [11],
"className": "text-center",
"render": function (data, type, row, meta) {
return '<input type="text" name="value" value="' + data + '" style="border:none;width:100%;background-color:initial"><span style="display: none;">' + data + '</span>';
}
}
],
drawCallback: function (settings) {
var role = $("#role").val();
$.each(settings.oInit.data, function (a, b) {
var id = '.js-switch_active' + name + '' + b.id;
enabledisableswitchery(role, level, id);
var arr = b.baseAvlCommDiam.split(',');
if (arr.length > 0) {
var id = 'baseavailable' + entity + '_' + b.id + '';
var select2 = $("#" + id +"").select2();
select2.val(arr).trigger("change");
}
})

                    $(".select2-container").tooltip({
                        title: function () {
                            return $(this).prev().attr("title");
                        },
                        placement: "auto",
                    });
                    $(".select2-selection--multiple").css('background', 'inherit');
                    $('[data-toggle="tooltip"]').tooltip();
                },
                buttons: [
                    'copy', 'excel', 'pdf'
                ]
            });

I want to use the cell.invalidate() for the columns active, baseAvlCommDiam which are a checkbox and select. Somehow I have managed to write the code for the input controls. Here is my code for that.

    $('table').on('focusout', 'tbody td input', function () {
        if (this.className != "select2-search__field") {
            var table = $(this).parent().parent().parent().parent().DataTable();
            var value = $(this).val();
            table.cell($(this).parent()).invalidate().data(value);
            button.show();
        }
    });

Same I have to do it for active (switchery control) and baseAvlCommDiam (select2 control).

Your help is much appreciated.

Thanks,
Bhargava