jquery datatable in MVC view

@model IEnumerable<WebApplication4.Models.EMP>

@{
    ViewBag.Title = "Index";
    Layout = null;

}
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables.css" />
<link rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables_themeroller.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<style>
    .theader th {
        background: #00B388 !important;
        color: #FFFFFF !important;
    }
    .searchformcontrol {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }
</style>


<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="TBL">
    <thead>
        <tr class="theader">
            <th>
                @Html.DisplayNameFor(model => model.EID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.NAME)
            </th>
            <th>ACTION</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>
                Search Eid
            </th>
            <th>
                Search Name
            </th>
            <th></th>
            </tr>
        </tfoot>
    <tbody>
        @foreach (var item in Model)
            {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.EID)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.NAME)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.EID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.EID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.EID })
                </td>
            </tr>
        }
    </tbody>

    </table>

<script type="text/javascript">
    $(function(){

        // Setup - add a text input to each footer cell
        $('#TBL tfoot th').each(function () {
            // var title = $(this).text();
            if ($(this).text() == '') {
                $(this).html('');
            }
            else {
                //$(this).html('<input type="text" placeholder= '+title+' />');
                $(this).html('<input type="text" placeholder= "' + $(this).text().trim() + '" style=" text-align:left;font-weight:100" class="searchformcontrol"/>'); // placeholder="Search ' + title + '"
            }
        });

        var table = $("#TBL").DataTable({
            "order": [[0, "asc"]],
            "lengthMenu": [[2, 10, 25, 50, -1], [2, 10, 25, 50, "All"]],
            "scroller": true,
            "orderClasses": false,
        })

        // Apply the search
        table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });

    });

</script>