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

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


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