jQuery DataTables get records with checkbox value

Question

I want to submit all records in DataTables with checkbox values. Current, my code is below:

Form Code

<form id="fmApprovedGradeStep" method="post" asp-controller="GradeStep" asp-action="GradeStep">
<div asp-validation-summary="All" class="text-danger"></div>
@Html.AntiForgeryToken();
<div class="card text-center">
    <div class="card-header text-muted">
        <p><b>Approved GradeStep</b></p>
    </div>
    <div class="card-body">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Search</label>
            <div class="col-sm-4 input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text fa fa-search"></span>
                </div>
                <input id="gradeStepApprovedSearch" type="text" class="form-control" placeholder="Search by Paygroup, Grade, Step" />
            </div>
        </div>
        <div class="form-group">
            <div class="table-responsive-sm">
                <table id="gradeStepApprovedTable" class="table table-striped table-bordered table-sm compact">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">
                                <div class="form-check">
                                    <input id="gradeStepApprovedCheckAll" type="checkbox" class="form-check-input" />
                                    <label class="form-check-label">
                                    </label>
                                </div>
                            </th>
                            <th scope="col" class="text-center"><label>Paygroup</label></th>
                            <th scope="col" class="text-center"><label>Grade</label></th>
                            <th scope="col" class="text-center"><label>Step</label></th>
                            <th scope="col" class="text-center"><label>Remarks</label></th>
                            <th scope="col" class="text-center"><label>Status</label></th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <div class="btn-group-sm">
            @if (true)
            {
                <a id="btnGradeStepAdd" asp-controller="GradeStep" asp-action="GradeStepAddEdit" class="btn btn-outline-success">
                    <span class="fa fa-plus"></span>
                    Add
                </a>
            }
            @if (true)
            {
                <button id="btnGradeStepApproveDelete" type="button" class="btn btn-outline-success" data-loading-text="Deleting..." onclick="Delete('#fmApprovedGradeStep', '#btnGradeStepApproveDelete');">
                    <span class="fa fa-trash"></span>
                    Delete
                </button>
            }
        </div>
    </div>
</div>

Js Code

    $(document).ready(function () {
    function Delete(formId, btnId) {
        if ($(formId).valid()) {
            ClearValidationSummary();
            if (confirm("Do you want to delete GradeStep(s)")) {
                var btn = $(btnId);
                var btnContent = $(btnId).html();
                $.ajax({
                    "method": "post",
                    "data": $(formId).serialize(),
                    "url": "@Url.Action('GradeStep', 'GradeStep', new { operation = 'Delete' })",
                    "beforeSend": function (jqXHR, settings) {
                        ButtonShowLoadingText(btn);
                    }
                }).done(function (data, textStatus, jqXHR) {
                    SuccessAlert("GradeStep(s) deleted successfully.");
                    $("#divGradeStepUnAuthorized").load('@(Url.Action("GradeStepPartialUnauthorized", "GradeStep"))');
                    $("#divGradeStepUnApproved").load('@(Url.Action("GradeStepPartialUnapproved", "GradeStep"))');
                    $("#divGradeStepApproved").load('@(Url.Action("GradeStepPartialApproved", "GradeStep"))');
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    ErrorAlert(jqXHR.responseText);
                }).always(function (jqXHR, textStatus) {
                    ButtonOffLoadingText(btn, btnContent);
                });
            }
        }
    }

var dataTableGradeStepApproved = $("#gradeStepApprovedTable").DataTable({
    "ordering": false,
        "destroy": true,
        "pagingType": "full_numbers",
        //"lengthMenu": jTableFilter,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "GradeStep/GradeStepJson",
            "type": "post",
            "dataType": "json"
        },
        "columns": [
            {
    "data": "checked", "name": "checked", "searchable": false, "render": function (data, type, row) {
                    return '<input type="checkbox" />';
                } },
            {"data": "grade", "name":"grade", "searchable": true },
            {"data": "step", "name":"step", "searchable": true },
            {"data": "remarks", "name":"remarks", "searchable": false },
            {
    "data": "status", "name": "status", "searchable": false, "render": function (data, type, row) {
                    switch (data.toUpperCase()) {
                        case "A":
                            return "Approved";
                        default:
                            return "Undefined";
                    }
                }
            },
            {
    "data": "id", "name": "id", "render": function (data, type, row) {
                    return '@if (true) {<a href="@Url.Action(" GradeStepAddEdit", "GradeStep")/'+ data +'" class="btn btn-outline-success btn-sm"><span class="fa fa-edit"></span>Edit</a> }';
            } }
        ]
    });
$("#gradeStepApprovedSearch").bind("keyup search input paste cut", function () {
    dataTableGradeStepApproved.search($(this).val()).draw();
});
});

I use code below to get all table records,

    var table = $('#gradeStepApprovedTable').DataTable()
    console.log(JSON.stringify(table.rows().data().toArray()));

But, it return to me values like below,

[
{
    "paygroup": "P1",
    "grade": "G1",
    "step": "S1",
    "remarks": "R1",
    "status": "OK"
},
{
    "paygroup": "P2",
    "grade": "G1",
    "step": "S1",
    "remarks": "R1",
    "status": "OK"
},
{
    "paygroup": "P3",
    "grade": "G1",
    "step": "S1",
    "remarks": "R1",
    "status": "OK"
}

] The result did not contain value for checkbox, could you share me how to return records with checkbox values?
Thanks a lot.

Add name attribute inside your <input type="checkbox" /> and re try. — SilentCoder
– SilentCoder, Commented Jan 10, 2018 at 9:45
I have tried ` "data": "checked", "name": "checked", "searchable": false, "render": function (data, type, row) { return '<input class="call- checkbox" name="checked" type="checkbox" />'; } }`, but it did not return any value — Edward
– Edward, Commented Jan 10, 2018 at 10:14

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Eventually, I got by solution by Help.It appended a column value with checkbox to row data by code below

    // event handler for individual rows
$("#gradeStepApprovedTable").on("click", "td input[type=checkbox]", function () {
    var isChecked = this.checked;
    var dtapi = $("#gradeStepApprovedTable").DataTable();
    // set the data item associated with the row to match the checkbox
    var dtRow = dtapi.rows($(this).closest("tr"));
    console.log(dtRow.data());
    dtRow.data()[0].Checked = isChecked;   
});

It will output result like below

[{"paygroup":"P1","grade":"G1","step":"S1","remarks":"R1","status":"OK"},{"paygroup":"P2","grade":"G1","step":"S1","remarks":"R1","status":"OK","Checked":false},{"paygroup":"P3","grade":"G1","step":"S1","remarks":"R1","status":"OK","Checked":true}]

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 11, 2018 at 7:38

Edward

30.2k12 gold badges84 silver badges141 bronze badges

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

Collectives™ on Stack Overflow

jQuery DataTables get records with checkbox value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related