Question

要求是：

显示过滤表格结果的单选按钮。

我在此功能的最佳边缘正常工作，但我无法弄清楚如何重新加载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>

PartialView.vbhtml

@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>

vaccine.index.js

$(function () {
// Someone has clicked one of the filter radio buttons
 $('input[type=radio]').click(function () {
    var o = {};
    o.filter = $(this).data("filter");

    // Make a viewModel instance
    var viewModel = new Object();
    viewModel.Filter = o.filter;

    //Ajax call to post the viewModel to the controller
    var strung = JSON.stringify(viewModel);

   $.ajax({
        url: app_base + 'Vaccine/ReloadIndex',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: strung,
        success: function (data) {
            //$('.tablecontainer').html(data);
            //$('#sample_4').DataTable().ajax.reload();
            oTableReq = $('#sample_4').DataTable();
            oTableReq.destroy();
            try {
                oTableReq = $('#sample_4').DataTable({
                    "bProcessing": true,
                    responsive: false,
                    //"autoWidth": false,
                    "scrollX": true,
                    data: data,
                    columns: [
         {
             "data": "VaccineId", "width": "50px", "render": function (data) {
                 return '<a class="btn-sm btn-primary" href="/Vaccine/Edit/' + data + '">Edit</a>';
             }
         },
        { "data": "VaccineAbbreviation", "autoWidth": true }
                    ]
                });
            } catch (exception) {
                message(exception, "Attention", "error");
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            ShowUserMessage("Error: " + xhr.status + " " + thrownError);
        }
    });
 });
});

VaccineController.vb

<HttpGet>
Function Index() As ActionResult
    Dim viewModel As New VaccineViewModel
    viewModel.Vaccines = _vaccineService.GetAllVaccines()
    Return View(viewModel)
End Function

<HttpPost>
Function ReloadIndex(ByVal viewModel As AjaxVaccineFilterViewModel) As JsonResult
    Dim allVaccines As New List(Of Vaccine)
    allVaccines = _vaccineService.GetAllVaccines()
    'filter with client request (which filter?)
    Dim filteredVaccines As New List(Of Vaccine)
    If viewModel.Filter = "1" Then
       filteredVaccines = allVaccines.Where(Function(x) x.VFC.ToLower = "yes").ToList()
    ElseIf viewModel.Filter = "2" Then
       filteredVaccines = allVaccines.Where(Function(x) x.VFC.ToLower = "no").ToList()
    ElseIf viewModel.Filter = "3" Then
        filteredVaccines = allVaccines.Where(Function(x) x.Recommend.ToLower = "yes").ToList()
    ElseIf viewModel.Filter = "4" Then
         filteredVaccines = allVaccines.Where(Function(x) x.Recommend.ToLower = "no").ToList()
    ElseIf viewModel.Filter = "5" Then
         filteredVaccines = allVaccines.Where(Function(x) x.Active.ToLower = "yes").ToList()
    ElseIf viewModel.Filter = "6" Then
         filteredVaccines = allVaccines.Where(Function(x) x.Active.ToLower = "no").ToList()
    Else
         'should not reach this condition
    End If
    'update viewModel
    viewModel.Vaccines = filteredVaccines
    Return Json(viewModel, JsonRequestBehavior.AllowGet)
End Function

视图模型

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

DataTables网站有一个似乎是一个解决方案的例子，但我无法获得我想要刷新的数据表。

Answer 1

试试这个......

$.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);
    }
});

Answer 2

官方forum说：

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

如何刷新jQuery的DataTables插件

2 个答案: