Submit data from jQuery DataTables

Question

I load a form from an AJAX call and then construct each row with a checkbox and a text field. I want to be able to change the data in the table and then submit the entire table to the server. This is my entire page:

@Html.HiddenFor(x=>x.ID, new {  @id = "txtTypeId"})
@using (Html.BeginForm("PostTable", "EandR", FormMethod.Post, new { @id = "formStatusByType" }))
{
<div>
    <table id="tblChooseProjectStatus">
        <thead>
            <tr>
                <th>ID</th>
                <th>Status</th>
                <th>Include</th>
                <th>Number</th>
            </tr>
        </thead>
    </table>
    <table>
        <tr>
            <td>
                <button type="submit" class="displaybutton" >Update</button>
            </td>
        </tr>
    </table>
</div>
}

<script>
$(document).ready(function () {
    debugger;
    $("#tblChooseProjectStatus").dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("GetAllProjectStatusByType")?type=' + $("#txtTypeId").val(),
        bJQueryUI: true,
        @*"ajax": {
            "url" : '@Url.Action("PostTable")',
            "type" : "POST",
            "data": function (d) {
                return JSON.stringify(d);
            }
        },*@
        //dom: 'Tlf<"clear">rtip',
        dom: 'ACBlf<"clear">rtip',
        colVis: {
            exclude: [0]
        },
        //"scrollY": '50vh',
        //"scrollCollapse": true,
        //"paging": false,
        //"scrollX": true,
        buttons: [
            { extend: 'copyHtml5', className: 'html5button' },
            { extend: 'excelHtml5', className: 'html5button' },
            { extend: 'csvHtml5', className: 'html5button' },
            { extend: 'pdfHtml5', className: 'html5button' }
        ],
        bAutoWidth: false,
        "oLanguage": {
            sEmptyTable: "There are no Project Statuses By Type at this time",
            sProcessing: "Processing, Please Wait...",
        },
        "aoColumns": [
            { "sWidth": "1%", sClass: "smallFonts" },
            { "sWidth": "10%", sClass: "smallFonts" },
            {
                "sWidth": "10%", sClass: "smallFonts", "sName": "Notify", "mRender": function (data, type, row) {
                    var chk = row[2] == 'True' ? ' checked="true" ' : ' ';
                    var chk1;
                    if (chk === ' ')
                        chk1 = "false";
                    else
                        chk1 = "true";
                    return "<div class='tooltip'><span class='tooltiptext1' style='font-size:x-small !important;'>Check to include this status with this type.</span><input type='checkbox'" + chk + " id='chknotify" + row[0] + "'; ></input></div>";
                    //return "<input type='checkbox'" + chk + " id='chknotify" + row[0] + "'; ></input>";
                }
            },
            {
                "sWidth": "10%", sClass: "smallFonts", "sName": "Notify", "mRender": function (data, type, row) {
                    return "<input type='text' style='width:70px' value=" + row[3] + "></input>";
                }
            }
        ],
        tableTools: {
            "sSwfPath": "../../Scripts/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends": "print",
                    "bShowAll": true
                }
            ]

        }
    });
    $("#tblChooseProjectStatus").dataTable().fnSetColumnVis(0, false);

    $('#tblChooseProjectStatus tbody').on('click', 'td', function () {
        var visIdx = $(this).index();
        if (visIdx != 1) {
            return false;
        }
        var par = this.parentNode.parentNode.id;
        var oTable = $("#tblChooseProjectStatus").dataTable();
        var aPos = oTable.fnGetPosition(this);
        var aData = oTable.fnGetData(aPos[0]);
        var rowIndex = $(this).closest('tr').index();
        var name = aData[0];
        var selectedDate = aData[0];
        if ($(this).prop('checked', true)){
            $(this).prop('checked', false);
        } else {
            $(this).prop('checked', true);
        }
    });



    $('#formStatusByType').on('submit', function (e) {
        var table = $('#tblChooseProjectStatus').DataTable();
        e.preventDefault();
        var form = this;
        var data = table.$('input,hidden,select,textarea').serialize();
        $.ajax({
            url: '@Url.Action("PostTable")',
            data: { model: data },
            success: function (data) {
                console.log('Server response', data);
            }
        });
    });
});

On the submit of the form the 'data' variable is completely empty. What am I doing wrong. I copied from the datatables site.

Try var data = table.find('input,hidden,select,textarea').serialize(); — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jan 8, 2018 at 14:52

Gyrocode.com · Accepted Answer · 2018-01-08 16:56:35Z

2

Add name attributes with unique values for each input, these are required for serialize() to work.

See jQuery DataTables: How to submit all pages form data - Submit all pages form data via Ajax request for more details.

edited Jan 8, 2018 at 16:56

answered Jan 8, 2018 at 15:53

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dean.DePue Over a year ago

OK, I've done that and some of the data is being collected. The checkboxes that are not checked are not included in the list. What do I post the value as, as string? Should I stringify the data?

Gyrocode.com Over a year ago

@Dean.DePue, consider checkboxes that are not included on the list as not checked.

Louys Patrice Bessette · Accepted Answer · 2018-01-08 15:29:16Z

0

After a quick test, that would be:

$('#tblChooseProjectStatus').find('input,hidden,select,textarea').serialize();

But that will serialize only the visible page... Since DataTable is redrawing on paging... And uses its data object to do so. You can access these data with var data = table.rows().data() which is an array of all rows... But that does not hold the input's value. More reading here.

I made a quick test on this CodePen

edited Jan 8, 2018 at 15:29

answered Jan 8, 2018 at 15:24

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

2 Comments

Dean.DePue Over a year ago

Nope, same result, completely blank

Louys Patrice Bessette Over a year ago

Does your input have name attribute? It is needed by serialize().

Collectives™ on Stack Overflow

Submit data from jQuery DataTables

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related