How to update DataTable with a parameter on a button click?

Question

I have a DataTable that is displaying all the records when the page is open. After that, when I select an item in my DropDownList, I need to filter the values. Filtering is working fine, but I have a problem refreshing the DataTable. I am returning the right JSON, but I don't know how to display it and refresh the DataTable. When I click on my button, it does the get method and returns the JSON, that I need to put in the DataTable. How can I do that?

This is my controller code:

 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);



    }

This is my View:

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

if you change ActionResult to JsonResult may be it will work — delta12
– delta12, Commented Apr 7, 2018 at 15:20

Alexander · Accepted Answer · 2018-04-10 11:01:03Z

I have found two solutions for this. One is to create a partial view and there would be the DataTable. On a button click you would call that view and it would render it as it should. But if you want to have it all in a one view, the solution is this: Have a JS function that is called when a button is clicked, and search the column by it's index with the value from the DropDown. This way you are not making another call to the ajax, which can be good.

This is the code in the view for the definitions of the button and the DropDown:

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

This is the JS code for the table and the search

    <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();


    });

Collectives™ on Stack Overflow

How to update DataTable with a parameter on a button click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related