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

Posted 2023-05-07

【中文标题】如何在单击按钮时使用参数更新 DataTable？

【英文标题】：How to update DataTable with a parameter on a button click?

【发布时间】：2018-09-17 09:33:14

【问题描述】：

我有一个 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>

【问题讨论】：

如果您将 ActionResult 更改为 JsonResult 可能会起作用

那行不通。

【参考方案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();


    );