Issue can't make filter for every column data table filter inside data

See more:

Javascript

jQuery

MVC5

jQuery-UI

, +

I work on ASP.NET MVC app. I am facing an issue. I can't add text input filter on top of every column to filter.

With another meaning, I have a datatable that has 3 columns, RequestNo, EmpId and EmpName.

So I will add 3 input box filters for 3 columns. Every column from requestNo, EmpId and EmpName.

So it will be:

input text box	input text box	input text box
RequestNo	EmpId	EmpName

Every input text box will filter column related to it.

So please tell me how to do it using JQuery or JavaScript ?

What I have tried:

<table id="dtbl" class="table table-bordered table-hover table-striped" 
style="width:100%;padding-left:5px;padding-right:7px;">
        <thead>
            <tr style="background-color: #f2f2f2;">

                <th style="border: 1px solid black;">
                    @Html.DisplayNameFor(model => model.RequestNo)
                </th>
                <th style="border: 1px solid black;">
                    @Html.DisplayNameFor(model => model.EmpID).ToString().Replace(":", "")
                </th>
                <th style="border: 1px solid black;">
                    @Html.DisplayNameFor(model => model.EmpName).ToString().Replace(":", "")
                </th>
                <th style="border: 1px solid black;">View Form</th>

            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
                <tr style="background-color: #f2f2f2;">

                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.RequestNo)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpID)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.ActionLink("View Form", "Details", 
                        new { id = item.RequestNo })
                    </td>

                </tr>
            }
        </tbody>

    </table>
</div>

<script>
        $(document).ready(function () {
            $('#dtbl').DataTable({
                "scrollX": true,
                "pageLength": 10,
                dom: 'Bfrtip',

                initComplete: function () {
                    // Remove export buttons
                    $('.buttons-excel, .buttons-pdf, .buttons-print, 
                       .buttons-csv, .buttons-copy').remove();
                }
            });
        });