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

Question

I work on asp.net mvc app I face issue I can't add text input filter on top of every column to filter 

with another meaning i have datatable have 3 columns RequestNo and EmpId and EmpName 

so I will add 3 input box filter for 3 column every column from requestNo and EmpId and EmpName

so shap 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 How to do it using jquery or java script ?   

 

 

my code as below :

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