Asp.net mvc 如何刷新jQuery的DataTables插件_Asp.net Mvc_Vb.net_Jquery Plugins_Datatables

Asp.net mvc 如何刷新jQuery的DataTables插件

asp.net-mvc vb.net jquery-plugins datatables

Asp.net mvc 如何刷新jQuery的DataTables插件,asp.net-mvc,vb.net,jquery-plugins,datatables,Asp.net Mvc,Vb.net,Jquery Plugins,Datatables,这些要求是：显示筛选表格结果的单选按钮我正处于这个功能正常工作的边缘，但我不知道如何重新加载DataTable。执行onclick之后，客户机将正确地从服务器检索数据，但在尝试刷新时，我仍然会收到DataTable运行时错误。单击建议的单选按钮后，下图返回JSON格式的正确数据： View.vbhtml @Imports Project.Domain.Models @Imports Project.Web.ViewModels @ModelType VaccineViewModel @Co

这些要求是：

显示筛选表格结果的单选按钮

我正处于这个功能正常工作的边缘，但我不知道如何重新加载DataTable。执行onclick之后，客户机将正确地从服务器检索数据，但在尝试刷新时，我仍然会收到DataTable运行时错误。单击建议的单选按钮后，下图返回JSON格式的正确数据：

View.vbhtml

@Imports Project.Domain.Models
@Imports Project.Web.ViewModels
@ModelType VaccineViewModel
@Code
   Layout = "~/Views/Shared/_Layout.vbhtml"
End Code
@section Styles
   @Styles.Render("~/StylesWithDataTables")
End Section

@section scripts
  <script type="text/javascript">
    var app_base = '@Url.Content("~/")';
  </script>
  @Scripts.Render("~/ScriptsWithDataTables")
  @Scripts.Render("~/Scripts/customajax/vaccine.index.js")
End Section

<div class="page-content">
<div class="row">
    <div class="col-md-8 col-md-offset-2">
          @Html.Partial("_GenericMessage")
    </div>
</div>
<div class="portlet box green">
    <div class="portlet-title">
        <div class="caption">
            List
        </div>
    </div>
    <div class="portlet-body form">
        <div class="form-body">
            <div class="row" style="padding-bottom: 10px; padding-top: 10px;">
                <div class="col-md-12">
                    <a class="btn-sm btn-primary" href="@Url.Action("Add", "Vaccine")"><i class="fa fa-plus"></i>&nbsp;Add New </a>
                </div>
            </div>
            <div class="row" style="padding-bottom: 10px; padding-top: 10px;">
                <div class="col-md-12">
                    <label>
                        <input checked type="radio" value="VFC" group="filter" data-filter="1"> VFC
                        <input type="radio" value="Non-VFC" group="filter" data-filter="2"> Non-VFC
                        <input type="radio" value="Recommended" group="filter" data-filter="3"> Recommended
                        <input type="radio" value="Non-Recommended" group="filter" data-filter="4"> Non-Recommended
                        <input type="radio" value="Active" group="filter" data-filter="5"> Active
                        <input type="radio" value="Inactive" group="filter" data-filter="6"> Inactive
                    </label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="portlet light portlet-fit portlet-datatable ">
                            <div class="portlet-body">
                                @Html.Partial("~/Views/Vaccine/_Vaccines.vbhtml", New AjaxVaccineFilterViewModel() With {.Vaccines = Model.Vaccines})
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

@Imports Project.Domain.Models
@Imports Project.Web.ViewModels
@ModelType AjaxVaccineFilterViewModel

<div class="tablecontainer">
 <table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_4">
    <thead>
        <tr>
            <th> </th>
            <th> Vaccine </th>
        </tr>
    </thead>
    <tbody>
        @Code
            For Each item As Vaccine In Model.Vaccines
            @<tr class="odd gradeX">
                <td> <a href="@Url.Action("Edit", "Vaccine", New With {Key .id = item.VaccineId})" class="btn-sm btn-primary">Edit</a></td>
                <td> @item.VaccineAbbreviation.ToUpper </td>
            </tr>
            Next
        End Code
    </tbody>
 </table>
</div>

Public Class AjaxVaccineFilterViewModel
    Public Property Vaccines As New List(Of Vaccine)
    Public Property Filter As String
End Class

该网站提供了一个似乎是解决方案的示例，但我无法获取要刷新的数据表。

试试这个

$.ajax({
    url: app_base + 'Vaccine/ReloadIndex',
    type: 'POST',
    dataType: 'html',
    contentType: 'application/json; charset=utf-8',
    data: strung,
    success: function (data) {
        var vaccines = data.Vaccines,
            table = $('#sample_4').DataTable();

        table.destroy();

        try {
            oTable = $('#sample_4').DataTable({
                "aLengthMenu": [[15, 30, 60, 120, -1], [15, 30, 60, 120, "All"]],
                "bProcessing": true,
                responsive: false,
                "scrollX": true,
                "aaData": vaccines,
                "columns": [
                 {
                     vaccines: "VaccineId",
                     render: function (vaccines, type, Vaccine) {
                         return '<a class="btn-sm btn-primary" href="/Vaccine/Edit/' + Vaccine.VaccineId + '">Edit</a>';
                     }
                 },
                 {
                    vaccines: "VaccineAbbreviation",
                    render: function (vaccines, type, Vaccine) {
                        return Vaccine.VaccineAbbreviation;
                    }
                 }]
            });
        } catch (exception) {
            alert(exception, "Attention", "error");
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + xhr.status + " " + thrownError);
    }
});

$.ajax({
url:app_base+“疫苗/重新加载索引”，
键入：“POST”，
数据类型：“html”，
contentType:'application/json；charset=utf-8'，
数据：strung，
成功：功能（数据）{
var疫苗=数据。疫苗，
table=$（'#示例4'）。DataTable（）；
表1.destroy（）；
试一试{
oTable=$（'#示例4'）。数据表({
“阿伦提努”：[[15,30,60,120，-1]，[15,30,60,120，“全部”]，
“bProcessing”：正确，
回答：错，
“scrollX”：正确，
“aaData”：疫苗，
“栏目”：[
{
疫苗：“疫苗”，
呈现：函数（疫苗、类型、疫苗）{
返回“”；
}
},
{
疫苗：“疫苗缩写”，
呈现：函数（疫苗、类型、疫苗）{
返回疫苗。疫苗缩写；
}
}]
});
}捕获（例外）{
警报（例外、“注意”、“错误”）；
}
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（“错误：+xhr.status+”+thrownError）；
}
});

官方声明：

您得到的错误是什么？DataTables警告：table id=sample_4-JSON响应无效。有关此错误的详细信息，请参阅我的.js文件$（'#sample_4'）.DataTable（）.ajax.reload（）中的成功后的结果；请在初始化数据表和重新加载数据表的位置添加代码。ThanksI在控制器中添加了调用部分视图和httpget的视图。我没有看到任何datatables初始化代码。看起来您是在页面加载时手动创建表（然后可能应用插件），但随后尝试使用datatables API进行过滤。这是正确的吗？我实现了您的建议并收到了错误，“table id=sample_4-请求了第0行第1列的未知参数“1”。“除了datatables.net之外，您是否还可以参考代码片段来更详细地指导我？您好，William，您已经接近解决我的问题了。”。我的数据成功返回，我可以通过Chrome>Sources选项卡和断点查看数据。我需要销毁当前表并创建一个新的datatable吗？您好，是的，销毁datatable的实际实例，我在使用AJAX更新数据时使用了这种方式，因为重载对我来说永远不起作用。您好，William，成功后，我的viewmodel返回为：data=Object{vaccures:Array（71），Filter:“5”}如何在数组中引用索引？另外，我正在尝试重建这些列。你会回顾我的更新答案并给出建议吗？更新的问题，而不是更新的答案。顺便说一句，我不再强烈地键入我的表，而是使用ajax加载$（document）.ready（function（）{和“type”：“get”，

Public Class AjaxVaccineFilterViewModel
    Public Property Vaccines As New List(Of Vaccine)
    Public Property Filter As String
End Class

$.ajax({
    url: app_base + 'Vaccine/ReloadIndex',
    type: 'POST',
    dataType: 'html',
    contentType: 'application/json; charset=utf-8',
    data: strung,
    success: function (data) {
        var vaccines = data.Vaccines,
            table = $('#sample_4').DataTable();

        table.destroy();

        try {
            oTable = $('#sample_4').DataTable({
                "aLengthMenu": [[15, 30, 60, 120, -1], [15, 30, 60, 120, "All"]],
                "bProcessing": true,
                responsive: false,
                "scrollX": true,
                "aaData": vaccines,
                "columns": [
                 {
                     vaccines: "VaccineId",
                     render: function (vaccines, type, Vaccine) {
                         return '<a class="btn-sm btn-primary" href="/Vaccine/Edit/' + Vaccine.VaccineId + '">Edit</a>';
                     }
                 },
                 {
                    vaccines: "VaccineAbbreviation",
                    render: function (vaccines, type, Vaccine) {
                        return Vaccine.VaccineAbbreviation;
                    }
                 }]
            });
        } catch (exception) {
            alert(exception, "Attention", "error");
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + xhr.status + " " + thrownError);
    }
});

$('#example').DataTable().ajax.reload();