Change style on a row in JQuery Datatables when ed

2019-09-07 19:40发布

问题:

I have a datatable from the JQuery plugin that displayes objects fetched from a database. At the end of each row there is an "edit" button that when clicked opens up a popup with fields that allows the user to change the object.

The code below is the "edit" button opening the popup.

<td>@Ajax.ActionLink("Edit",
                                 "controllerMethodReturningEditView",
                                 new
                                 {
                                     Id = @m.Id
                                 },
                                 new AjaxOptions
                                 {
                                     HttpMethod = "GET",
                                     UpdateTargetId = "popupBox",
                                     InsertionMode = InsertionMode.Replace,
                                     OnSuccess = "openPopup('myPopup')"
                                 })</td>

The controller method called when pressing the edit button just opens a view that is a partial displayed in a popupbox

return PartialView("editObjectView", objectModel);

and this "editObjectView" just contains a form with fields for taking input.

@using(Html.BeginForm(...
           <label>...</label><input ... />
           .... and so on

Then in this popup the user is allowed to edit the values of the displayed object. When the user presses a "save" button in the popup the new values will be sent to a controller method that saves the values (to the object) in the database. When the values are saved the controller method calls the controller method that loaded the first view (the view showing the datatable) and that method requests all objects from the database in order to display new objects or changes to objects.

Now here is my question: when the page is reloaded after an object has been edited, how do I change the style of the edited row? All I want is to set a red border around the recently edited row. I would prefer if I would not have to send the object through all the controller methods used to reload the page.

Thanks for the help, appreciate it!

回答1:

Not knowing what's being returned to the page and not knowing the styling you want to update.

Let's say you want to alternate each rows css class. You could do something like below after the content is added to the page:

$("tr:nth-child(odd)", "#YOUR_TABLE_ID").addClass("odd-row");

Or, make sure that each rows HTML is formatted it an unique ID tag "..." and then do some jQuery do set the class after being added to the page.

If the request is an Ajax request, and you're returning something back using json - like:

var json { Id = Table.ID, status = true };

Then the OnSuccess event would do something like this:

function OnSaveSuccess(data) {
    if (data.status) {
        $("#" + data.Id).addClass("highlight-row");
    } else {
    console.warn("save was not successful!");
    }
}