行更新后刷新Jquery数据表

时间:2017-04-14 09:48:26

标签: jquery ajax asp.net-mvc datatables

我正在开发一个ASP.NET MVC应用程序。我现在正在开发一个搜索数据库用户的搜索页面。此页面包含Partialview,将搜索结果显示为Jquery数据表。 现在,当我更新用户时,我想用新值重新加载/刷新Jquery数据表。

1。更新jquery数据表的给定用户的Ajax函数代码

    function Update() {

    var res = validate();
    if (res == false) {
        return false;
    }
    var userObj = {
        Id: $('#userId').val(),
        Matricule: $('#userMatricule').val(),
        LastName: $('#userLastName').val(),
        FirstName: $('#userFirstName').val(),
        dateRecrutement: $('#userDateRecrutement').val(),
        entiteId: $('#entite').val(),
        roleId: $('#role').val(),
    };
    $.ajax({
        url: '/User/updateUserAjax',
        data: JSON.stringify(userObj),
        type: 'POST',
        contentType: 'application/json;charset=utf-8',
        dataType: 'json',
        success: function (result) {
            jQuery("#MessageUpdateUserConfirm").text(result);
            $("#dialog-confirm-update").dialog({
                modal: true,
                buttons: {
                    Ok: function () {
                        $(this).dialog("close");
                    }
                }
            });
            $('#myModal').modal('hide');
            ('#userId').val("");
            ('#userMatricule').val("");
            ('#userLastName').val("");
            ('#userFirstName').val("");
            ('#userDateRecrutement').val("");
            ('#entite').val("");
            ('#role').val("");
            location.reload();
            //let dt = $("#dataTables-userSearchResults").datatable();
            //dt.draw('full-reset');
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
    }

2。包含搜索表单的主页的代码&部分视图

    <div class="row">
    <fieldset class="col-md-10" id="infoForm">           
        <form name="form-recherche" id="FormUsersSearch" class="form-horizontal">
            <div class="form-group">
                <div class="col-md-3">
                    <label for="matricule">Matricule</label>
                </div>
                <div class="col-md-3">                        
                    @Html.EditorFor(model => model.matricule, new { htmlAttributes = new { @class = "form-control" } })
                </div>
                <div class="col-md-3">
                    <label for="nom"> Nom :</label>
                </div>
                <div class="col-md-3">                        
                    @Html.EditorFor(model => model.nom, new { htmlAttributes = new { @class = "form-control" } })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="prenom"> Prénom:</label>
                </div>
                <div class="col-md-3">                        
                    @Html.EditorFor(model => model.prenom, new { htmlAttributes = new { @class = "form-control" } })
                </div>
                <div class="col-md-3">
                    <label for="service">Direction:</label>
                </div>
                <div class="col-md-3">
                    @Html.DropDownListFor(model => model.direction, ViewBag.DirectionId as SelectList, "---Select a Direction---", new { id = "Direction", @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="division">Division :</label>
                </div>
                <div class="col-md-3">                        
                    @Html.DropDownListFor(model => model.division, ViewBag.division as SelectList, "---- Sélectionnez ----", new { id = "Division", @class = "form-control" })
                </div>
                <div class="col-md-3">
                    <label for="service">Service :</label>
                </div>
                <div class="col-md-3">                        
                    @Html.DropDownListFor(model => model.service, ViewBag.service as SelectList, "---- Sélectionnez ----", new { id = "service", @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3">
                    <label for="dateRecrutementDebut">Date recrutement début :</label>
                </div>
                <div class="col-md-3">                        
                    @Html.EditorFor(model => model.dateRecrutementDebut, new { htmlAttributes = new { @class = "form-control datepicker" } })
                </div>
                <div class="col-md-3">
                    <label for="dateRecrutementDebut">Date recrutement fin :</label>
                </div>
                <div class="col-md-3">                        
                    @Html.EditorFor(model => model.dateRecrutementFin, new { htmlAttributes = new { @class = "form-control datepicker" } })
                </div>
            </div>            
        </form>
        <div class="b-right">
            <a class="btn btn-custom" onclick="location.href='@Url.Action("Create", "User")'">
                <i class="fa fa-plus"></i>
                Ajouter
            </a>
            <a class="btn btn-custom"  id="searchUsers" >
                <i class="fa fa-search"></i>
                Rechercher
            </a>
        </div>
    </fieldset>
    <div id="usersearchResult">

    </div>
</div>

第3。 Jquery / AjaX函数提供数据表

    $(function () 
    {       
    var submitButton = $("#searchUsers");
     var infoForm = $("#infoForm");

            //  Attach event handler to submit button        
            submitButton.click(function () {            
                SubmitInfo(infoForm);            
            });        
        });

        function SubmitInfo(formContainer)
        {

            //event.preventDefault();        
            $.ajax({
                url: "@(Url.Action("UserSearch"))",
                type: "GET",
                data: formContainer.serialize(),
                success: function (data) {
                    //Fill div with results               
                    $("#usersearchResult").html(data);
                },
                error: failedSearch
            });
        }

        function failedSearch() {
            $("usersearchResult").html = "There was a problem in the search. Please, try later on";


}

我尝试了$('#dataTables-userSearchResults').DataTable().ajax.reload(),但它没有用。

感谢您的帮助

0 个答案:

没有答案