Jquery Datatable实体框架Checkbox UPDATE数据库

Question

I added a check box for each row in my DataTable. The user should click approve and the rows that are "checked" should have status change to "Approved". So far this works in the database by using AJAX. But I want to change the data value in the VIEW without reloading the table data.

Is there some way to write a Javascript to change row[x].status = Approved if CheckBox is checked and then the Approve button is clicked?

enter code here     $(document).ready(function () {

    var table = $('#provider_contracts').DataTable({
        "scrollX": true,
        initComplete: function () {

            this.api().columns([1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12]).every(function () {
                var column = this;
                var select = $('<select class="select_option" "><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')

                });
            });
        }
    });


    $('#selectAll').click(function (e) {
        if ($(this).hasClass('checkedAll')) {

    $('input').prop('checked', false);
        $(this).removeClass('checkedAll');

    } else {
        $('input').prop('checked', true);
        $(this).addClass('checkedAll');
        }
    });

        var serviceURL = '/THPP-ConfigPortal/ProviderContracts/Index/';

        //$("#ID").submit(function () {
            var tableName = "provider_contracts";
            $('#AjaxCall').click(function () {
            $.ajax({         

            url: serviceURL,
            contentType: "application/json; charset=utf-8",

            success: function(result){
                $('#provider_contracts').find('input[type="checkbox"]:checked').each(function () {

                     $(this).closest('tr').find('td').eq(10).text('Approved');


                });
            }

            //sucess:function()
            //{
            //    $('#provider_contracts').find('input[type="checkbox"]:checked').each(function () {

            //        var item = $(this).val();

            //        alert(item);
            //    });
            //}

                });

            });

        //});    

});
enter code here

@model IEnumerable<WebApplication1.Models.thpp_Business_Config_Self_Service>

<link href="~/Scripts/jquery.dataTables.min.css" rel="stylesheet" />
@using (Ajax.BeginForm("Index", "ProviderContracts", null, new AjaxOptions()
{
    InsertionMode = InsertionMode.Replace
}, new { id = "ID" }))
{
    <p style="text-align:left">
        <input type="submit" id="AjaxCall" value="Approve" class="btn btn-default" />

    </p>

    <br />
    <br />
    <table id="provider_contracts" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>
                    @Html.CheckBox("isApproved", false, new
                 {
                     @id = "selectAll"
                 })
                </th>
                <th>
                    Internal_ID
                </th>
                <th>
                    Type
                </th>
                <th>
                    LOB
                </th>
                <th>
                    Description
                </th>
                <th>
                    Eff_Date
                </th>
                <th>
                    Term_Date
                </th>
                <th>
                    Fee_Sched
                </th>
                <th>
                    Percentage
                </th>
                <th>
                    Conversion
                </th>
                <th>
                    Status
                </th>
                <th>
                    Timely_Filing
                </th>
                <th>
                    Spec.
                </th>

                <th></th>
            </tr>
        </thead>
        <tfoot>

            <tr>
                <th></th>
                <th>
                    Internal_ID
                </th>
                <th>
                    Type
                </th>
                <th>
                    LOB
                </th>
                <th>
                    Description
                </th>
                <th>
                    Eff_Date
                </th>
                <th>
                    Term_Date
                </th>
                <th>
                    Fee_Sched
                </th>
                <th>
                    Percentage
                </th>
                <th>
                    Conversion
                </th>
                <th>
                    Status
                </th>
                <th>
                    Timely_Filing
                </th>
                <th>
                    Spec.
                </th>
                <th></th>
            </tr>
        </tfoot>

        <tbody>
            @foreach (var item in Model)
            {
                <tr>

                    @Html.HiddenFor(modelItem => item.Control)

                    <td class="selectAll">

                        @Html.CheckBox("complete", false, new { @class = "complete", id = "complete[]", @value = item.Control })

                    </td>


                    <td>
                        @Html.DisplayFor(modelItem => item.Internal_ID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Type_Indicator)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.LOB)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Effective_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Term_Date)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Fee_Sched)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Percentage)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Conversion)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Status)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Timely_Filing_Days)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Specialty)
                    </td>

                    <td>

                        <a href="@Url.Action("Edit/" + item.Control, "ProviderContracts") " class="modal-link btn btn-success"><span class="glyphicon glyphicon-pencil"></span></a>
                        <a href="@Url.Action("Create/", "ProviderContracts") " class="modal-link btn btn-success"><span class="glyphicon glyphicon-plus"></span></a>
                        <a href="@Url.Action("Delete/" + item.Control, "ProviderContracts") " class="modal-link btn btn-danger"><span class="glyphicon glyphicon-trash"></span></a>


                    </td>
                </tr>
            }
        </tbody>
    </table>
}

@Scripts.Render("~/bundles/jqueryval")

<script src="~/Scripts/ProviderContracts.js"></script>

Answer 1

 var serviceURL = '/THPP-ConfigPortal/ProviderContracts/Index/';

            //$("#ID").submit(function () {
                var tableName = "provider_contracts";
                $('#AjaxCall').click(function () {
                $.ajax({         

                url: serviceURL,
                contentType: "application/json; charset=utf-8",

                success: function(result){
                    $('#provider_contracts').find('input[type="checkbox"]:checked').each(function () {

                         $(this).closest('tr').find('td').eq(10).text('Approved');


                    });
                }