Serialize data in DataTables - need some fresh eyes please :)

afy65

Creating the datatable dynamically with a call to my controller - this all works great

function getYardStockItems(id) {
    if (table) {
        table.destroy();
    }
    table = $('#stockYardTable').DataTable({
        "autoWidth": false,
        "scrollY": "350px",
        "scrollCollapse": true,
        "fnInitComplete": function (oSettings) {
            if (table.data().count() > 0) {
                $('#multimodeChk').removeAttr("disabled");
                $('#scrapBtn').removeAttr("disabled");
            } else {
                $('#multimodeChk').attr("disabled", true);
                $('#scrapBtn').attr("disabled", true);
            }
        },
        "paging": true,
        "sDom": 'lfr<"fixed_height"t>ip',
        "ajax": {
            "url": "/StockItemYard/GetYardStockItemList",
            "type": "GET",
            "data": { yardID: id },
            "datatype": "json"
        },
        "columns": [
            { "data": "StockItemMnemonic" },
            { "data": "StockTypeName" },
            { "data": "StockItemDescription" },
            {
                "data": "StockItemYardQtyInYard", className: "text-right", render: function (d) {
                    return (d).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                }
            },
            {
                "data": "StockItemYardQtyOnSite", className: "text-right", render: function (d) {
                    return (d).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                }
            }],
        "columnDefs": [{
            "targets": 5,
            "visible": false,
            "data": null,
            "render": function (data, type, full, meta) {
                return '<input type="text" style="width: 70px;" class="form-control form-control-xs pull-right text-right" id="scrapQty' + meta.row + '">';
            }
        }]
    });

I have a function that shows items based on id that populates the grid and this all works fine too and this is contained in a document.ready

   getYardStockItems(0) //initial load

    $(document).off('change', '#yardDdl');
    $(document).on('change', '#yardDdl', function () {
        if ($(this).val() === "") {
            getYardStockItems(0);
            return;
        }
        getYardStockItems($(this).val());
    });

The issue I have is that I have added a text box in column 5 and want to serialise this data and send back to the controller. Im using the following:

        var data = table.$('input').serialize();
        console.log(data);

but get nothing - maybe I have setup the table incorrectly or I've missed something somewhere - some fresh eyes are need and some help please would be greatly appreciated.

Daniel

afy65

Ahhhhhh
worked it out myself - extracting data from the textboxes - you must go through jQuery or native DOM. DataTables itself is not aware of any changes made to form input field.

will be using the following in a loop - this may help someone

var data = table.cell(rowIndex,columnIndex).nodes().to$().find('input').val()

kthorngren

This is from the `jQuery serialize() docs:

For a form element's value to be included in the serialized string, the element must have a name attribute.

Looks like you need to add a name attribute to each input.

Kevin

afy65

Thanks kevin
this is correct - although the looping would have worked, your advice has made this much easier and without looping marked your answer as the accepted answer!