如何通过ajax发布后重新加载引导表

Posted 2023-04-13

【中文标题】如何通过ajax发布后重新加载引导表

【英文标题】：How to realod bootstrap table after post via ajax

【发布时间】：2018-08-26 12:36:09

【问题描述】：

我正在使用引导表显示数据库中的行，它是 MVC ASP.NET，我已将数据放入 ViewBag 并返回包含 viewbag 作为要显示的数据的视图，所以它看起来像这样：

<div class="row rpad">
        <div class="col-md-12">
            <div class="z-panel-2">
                <div class="oneRow">
                    <table id="cT">

                        <thead>
                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Date & time
                                </th>
                                <th>
                                    Type
                                </th>
                                <th>
                                    Homework done
                                </th>

                                <th>
                                    Teacher
                                </th>

                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in ViewBag.AllClasses)
                            
                                <tr class="class" id="@item.ID">


                                    <td>@item.Date</td>
                                    <td>@item.Type.Name - @item.User_Class.ClassType.NumberOfLessons</td>
                                    <td>
                                        @if (item.HomeWorkDone ?? false)
                                        
                                            <i class="fa fa-check" aria-hidden="true"></i>
                                        
                                    </td>
                                    <td>
                                        @item.User.Name
                                    </td>
                                </tr>
                            
                        </tbody>

                    </table>

可能会注意到我正在循环所有数据 ViewBag.AllClasses 并且我正在将数据显示为表格中的行..

当用户单击一行时，我正在使用值更新数据库：作业已阅读：true

$.ajax(
        url: '@Url.Action("setHomework", "homework")',
        type: "GET",
        data:  id: id ,

并且下次用户重新加载页面时，将执行此条件（如上面的代码中所述）：

@if (item.HomeWorkDone ?? false)
 
       i class="fa fa-check" aria-hidden="true"></i>
 

上面的代码意味着，如果用户在作业字段上的值为 true，则会显示 fontawesome 图标，这样他就会知道他把作业弄红了，但我想知道在他点击后如何重新定义这个引导表的内容该行，因此他不需要重新加载页面即可看到该行上的那个标记（字体真棒图标）..（作为作业是红色的标志）

我希望有另一种方法，而不是刷新整个页面/视图.. 谢谢

【参考方案1】：

我认为您可以在 ajax 调用中添加成功回调。在里面..你可以在该行附加一个 td 。

   $.ajax(
        url: '@Url.Action("setHomework", "homework")',
        type: "GET",
        data:  id: id ,
        success: function (data) 
                if (data == "1")  // worked as it should

  $(row).find('td:last').after('<td><i class="fa fa-check" aria-hidden="true"></i></td>');

     
    
  );

我认为一种更简洁的方法是默认设置一个td，然后根据item.HomeWorkDone 更改图标的类别。所以它会是这样的：

  $(row).find('.fa-exclamation-circle').addClass('fa-check').removeClass('fa-exclamation-circle');

另外，建议使用 HTTP POST 进行更新操作。