Iterate through rows

singhswat

Hi - I'm trying to iterate through rows to post back to controller. Ideally, if I can iterate through only specific columns then it will better.

When a user clicks save changes, I want to capture all the values and postback.

I keep getting error at var allData = table.data();

"table undefined"

I just followed an example here..
https://northcoder.com/post/extracting-data-from-a-datatables-t/

here's my sample code for this

@section scripts{

    @* some scripts and references *@


<script type="text/javascript">      


    $(document).ready(function () {

            var table = $("#tblRFQ").DataTable({
                "serverSide": false, // for process server side
                "filter": true, // this is for disable filter (search box)
                "paging": true,
                "pageLength": 20,
                "ajax": {
                    "url": "/Controller/Function",
                    "type": "GET",
                    "datatype": 'json',
                    "data": 'data'
                },
                "columnDefs":
                    [
                        {
                            "targets": [0],
                            "visible": true,
                            "searchable": true,
                            render: function (data) {

                                return data;
                            }
                        },                       
                        {
                            "targets": [1],
                            "searchable": true,
                            render: function (data, type, row) {
                                if (data == null) {
                                    return "<input type='text' style='width:50px'>";
                                }
                                else if (row.PAction != "Completed") {
                                        data = "<input type='text' id='txtBuy' style='width:50px' value='" + data + "'>";
                                }
                                else {
                                    data;
                                }
                                return data;
                            }
                        },
                        ... Other columns
                        {
                            "targets": [22],
                            "visible": true
                        }
                    ],
                "columns": [
                    { "data": "Paction", "name": "PAction", "width": "10%" }, // 1
                    { "data": "Istatus", "name": "Istatus", "width": "5%" },  // 2                    
                    .. Other columns
                    { "data": "RowId", "name": "RowId", "visible": true, "width": "5%"} // 23
                ],
                "dom": '<"top">rt<"bottom"flp><"clear">',
                select: "single",
                initComplete: function () {
                    $('#schdule > tbody  > tr:gt(0)').each(function (index) {
                        $(this).find('.start').prop("disabled", true);
                    });                    
                }
            });

            table.columns().every(function () {
                var that = this;
                $('input', this.header()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });

        });




    /************************** Save Changes *****************************/

    $("#btnSaveChanges").click(function () {
            debugger;
            //This loops through all the rows so trying for loop
                    $('#tblRFQ tr').each(function (i, row) {
                        debugger;
                        var allData = table.data();
                        for (var i = 0; i < allData.length; i++) {
                            var rowData = allData[i];
                            for (var j = 0; j < rowData.length; j++) {
                                console.log("row " + (i + 1) + " col " + (j + 1) + ": " + rowData[j]);
                            }
                        }
                    });
                });

    /*******Ending Save Changes****/


</script>
}


<style>
    .my-input-class {
        padding: 3px 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
</style>

@using (Html.BeginForm(new { id = "frmRFQdetails" }))
{
    <body>
        <div class="container-fluid">
            <div class="display">
                <input type="button" value="Save Changes" id="btnSaveChanges" class="btn btn-success btn-xs" />
                <table id="tblRFQ" class="table table-striped table-bordered dt-responsive wrap" cellspacing="0" width="1950px">
                    <thead class="border-collapse">
                        <tr id="filterrow">
                            <th>P Action</th>
                            <th>I Status</th>
                           ... other columns
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </body>


}

Apologies if this is repeat question....

allan

It is undefined there. table is defined inside your document ready handler.

So two options:

1. Make table global,
2. Move the event handler into the document ready function.

I'd suggest 2

Allan

singhswat

thanks Allan.
I moved the event handler in same scope but when a user enters a value in text box 'txtbuy' that update value is not captured in table. it always retains old value if any.

var allData = table.data();

Appreciate any pointers.