如何在单击按钮时使用参数更新 DataTable？

Question

我有一个 DataTable，它在页面打开时显示所有记录。之后，当我在 DropDownList 中选择一个项目时，我需要过滤这些值。过滤工作正常，但我在刷新 DataTable 时遇到问题。我正在返回正确的 JSON，但我不知道如何显示它并刷新 DataTable。当我单击我的按钮时，它会执行 get 方法并返回我需要放入 DataTable 的 JSON。我该怎么做？

这是我的控制器代码：

 public ActionResult GetData(int? izabranaZgrada)
    {
        ViewData["lista"] = GetAllZgrade();
        if (izabranaZgrada == null || izabranaZgrada == 0)
            // return View(GetAllKorisnik());
            return Json(new { data = GetAllKorisnik() }, JsonRequestBehavior.AllowGet);
        else
            return Json(new { data = GetAllKorisnik().Where(zgr => zgr.id_zgrade == izabranaZgrada) }, JsonRequestBehavior.AllowGet);



    }

这是我的观点：

<p>
    @Html.ActionLink("Create New", "Create")

</p>
<p>
    @using (Html.BeginForm("GetData", "Korisnik", FormMethod.Get))
    {
        <table>
            <tr>
                <td>
                    @Html.DropDownList("izabranaZgrada", new SelectList((System.Collections.IEnumerable)ViewData["lista"], "id", "naziv"), "Izaberite zgradu", htmlAttributes: new { @class = "form-control" })
                </td>
                <td><input type="submit" value="Pretraga" /></td>
            </tr>
        </table>

    }
</p>
<table class="table table-striped table-condensed" id="tableKorisnik">
    <thead>
        <tr>
            <th>
                Ime i prezime
            </th>
            <th>
                JMBG
            </th>

            <th>
                Broj stana
            </th>
            <th>
                Kvadratura
            </th>

            <th></th>
        </tr>
    </thead>
</table>
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
@section scripts{
    <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
    <script>
        var Popup, dataTable;
        $(document).ready(function () {
            dataTable = $("#tableKorisnik").DataTable({
                "ajax": {
                    "url": "/Korisnik/GetData",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "imePrezime" },
                    { "data": "jmbg" },
                    { "data": "brStana" },
                    { "data": "kvadratura" },
                    {"data": "ID", "render": function (data) {
                        return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit","Employee")/" + data + "')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm 'style='margin-left:5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>"

                    },
                        "orderable": false,
                        "searchable": false,
                        "width": "150px"

                    }],
                "language": {
                    "emptyTable": "No data. <b>Add new</b>"
                }
            });
        });

    </script>
}

Answer 1

我为此找到了两种解决方案。一种是创建一个局部视图，并且会有DataTable。单击按钮时，您将调用该视图，它会按应有的方式呈现它。 但是，如果您想将所有内容集中在一个视图中，则解决方案是： 有一个在单击按钮时调用的 JS 函数，并使用 DropDown 中的值按其索引搜索列。这样您就不会再次调用 ajax，这可能很好。

这是视图中定义按钮和下拉菜单的代码：

<table>
    <tr>
        <td>
            @Html.DropDownList("izabranaZgrada", new SelectList((System.Collections.IEnumerable)ViewData["lista"], "id", "naziv"), "Izaberite zgradu", htmlAttributes: new { @class = "form-control" })
        </td>
        <td><input type="button" value="Pretraga" id="bPretraga"  /></td>
    </tr>
</table>

这是表格和搜索的JS代码

    <script>
    var Popup, dataTable;

    $(document).ready(function () {

        $("#tableKorisnik").DataTable({
            "ajax": {
                "url": "/Korisnik/GetData",
                "type": "GET",

                "datatype": "json"
            },

            "columns": [
                { "data": "imePrezime" },
                { "data": "jmbg" },
                { "data": "brStana" },
                { "data": "kvadratura" },
                { "data": "id_zgrade"},
                {"data": "ID", "render": function (data) {
                    return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit","Employee")/" + data + "')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm 'style='margin-left:5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>"

                },
                    "orderable": false,
                    "searchable": false,
                    "width": "150px"

                }],
            "columnDefs": [{
                "targets": [4],
                "visible": false
            }
            ],
            "language": {
                "emptyTable": "No data. <b>Add new</b>"
            }

        });

    });
    $("#bPretraga").click(function () {
        var xh = $("#izabranaZgrada").val();
        var table = $("#tableKorisnik").DataTable();
        /*   table.search(xh).draw();*/
        table.columns(4).search(xh).draw();


    });