how to add txtbox to jquery datatable and update to rspctive row in db

kaushik guru

Dear team i am new in using datatable i have a datatable where i want to add a textbox for each row and on button click event i want to save it in the db with respective textbox to its particular id

````

````

this is my datatable
i am struck after this part any help will be appreciated

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul3y ago
Accepted answer
To save the data in the database with the respective textbox, you need to handle the button click event and retrieve the data from each textbox using their respective `id`s.
```
 
$('#btnSave').click(function () {
    var dataToSave = [];
    $('#insurancetable tbody tr').each(function () {
        var empId = $(this).find('[name="chkSelect"]').val();
        var nomineeName = $(this).find('[name="txtNominee"]').val();
        dataToSave.push({ employeeInsuranceId: empId, nomineeName: nomineeName });
    });
    $.ajax({
        type: "POST",
        dataType: "JSON",
        url: "/HRValidation/SaveInsuranceNominee",
        data: JSON.stringify(dataToSave),
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            console.log(response);
        },
        error: function (error) {
            console.log(response);
        }
    });
});
```
Here, you are handling the `click` event of a button with the `id` "btnSave". Inside the function, you are iterating over each row of the datatable and retrieving the values of the checkbox and the textbox using their respective `name`s. You are then creating an array of objects with the `employeeInsuranceId` and the `nomineeName` for each row. You are sending the data to the server using an AJAX call to a URL `/HRValidation/SaveInsuranceNominee`. You are also setting the `contentType` to `"application/json; charset=utf-8"` to indicate that you are sending JSON data in the request body.
You will need to modify the server-side code to handle the data sent from the client and save it in the database with the respective `employeeInsuranceId`.
+2

kaushik guru3y ago

@tuhin paul the array object is alwasy returning null

This is my controller

[HttpPost]
        public JsonResult SaveInsuranceNominee(List data)
        {
            int id = 0;
            foreach (var lol in data)
            {
                var ll = (from i in _context.EmployeeInsuranceees where i.EmployeeId == 1 select i).SingleOrDefault();
                Console.WriteLine(lol);
            }
            return Json(new { success = true });
        }

and this is my model

public class InsuranceValidateVM
    {
        public int Employeeid { get; set; }

        public int employeeInsuranceId { get; set; }

        public int ischecked { get; set; }

        public string nomineeName { get; set; }
    }

what am i doing wrong here ?

Tuhin Paul3y ago

To add a textbox for each row of your datatable, you can add another column in your `columns` array and use the `render` function to return a textbox with a unique `id` for each row.

$(document).ready(function () {
    var empid = '@ViewBag.empid';
    var dataTable = $('#insurancetable').DataTable({
        data: response,
        columns: [
            { 
                "data": null, 
                "render": function (data, type, full, meta) { 
                    return ''; 
                }
            },
            { 'data': 'employeeInsuranceId' },
            { 'data': 'employeeId' },
            { 'data': 'insurance_Nomiee_Name' },
            { 'data': 'insurance_Nomiee_Gender_Name' },
            { 'data': 'insurance_Nomiee_Relationship_Name' },
            { 'data': 'insurance_Nomiee_DOB_String' },
            { 'data': 'relationship_Comments' },
            { 
                "data": null, 
                "render": function (data, type, full, meta) { 
                    return ''; 
                }
            },
        ]
    });
});

The new column will have a `render` function that returns a textbox with a unique `id` for each row. The `id` is generated by concatenating the string `"txtNominee_"` with the `employeeInsuranceId`.

Naimish Makwana3y ago

To add a textbox for each row in your datatable, you can modify the columns array in your datatable initialization code. You can add a new column to the columns array and use the render function to generate the textbox HTML for each row. Here's an example:

$('#insurancetable').dataTable({
    data: response,
    columns: [
        { "data": null, "render": function (data, type, full, meta) { return ''; }},
        { 'data': 'employeeInsuranceId' },
        { 'data': 'employeeId' },
        { 'data': 'insurance_Nomiee_Name' },
        { 'data': 'insurance_Nomiee_Gender_Name' },
        { 'data': 'insurance_Nomiee_Relationship_Name' },
        { 'data': 'insurance_Nomiee_DOB_String' },
        { 'data': 'relationship_Comments' },
        { "data": null, "render": function (data, type, full, meta) { return ''; }}
    ]
});

This adds a new column to the datatable with a textbox for each row. The name and id attributes of the textbox are generated using the employeeInsuranceId field, so each textbox will have a unique identifier.

To save the textbox values to the database when a button is clicked, you can loop through the rows of the datatable and retrieve the value of each textbox. You can use the rows() and data() methods of the datatable object to get an array of all the rows and their data, and then loop through the array to get the textbox values. Here's an example:

$('#saveButton').click(function () {
    var data = $('#insurancetable').DataTable().rows().data();
    for (var i = 0; i < data.length; i++) {
        var employeeInsuranceId = data[i].employeeInsuranceId;
        var textboxValue = $('#nomineeTextbox_' + employeeInsuranceId).val();
        // Use an AJAX call to save the textbox value to the database
    }
});

Thanks