Why the datatables jquery does not load first time in my Partial View rather it loads on second time

Raza

@model Domain.Entities.Academic.ViewStudent

@{
ViewBag.Title = "Details";
}

Student Details

<br />

<div class="container">

    <div class="row">

        <div class="col-md-2">


            <img src="~/studentpictures/@(Model.stu.ID).png" alt="" height="120" width="120" />

        </div>
        <div class="col-md-4">
            <div class="row"><h4><label>Roll #:</label>@Html.DisplayFor(model => model.stu.ID) </h4></div>
            <div class="row"><h4><label>Name: </label>@Html.DisplayFor(model => model.stu.Name) </h4></div>
            <div class="row"><h4><label>Father Name: </label>@Html.DisplayFor(model => model.stu.Father_Name) </h4></div>
        </div>
        <div class="col-md-6"></div>
    </div>

    <hr />

    <div class="form-group">
        <label class="control-label col-md-2">Allownce Type</label>
        <div class="col-md-10">
            @Html.DropDownList("ReportsID", new SelectList(ViewData["Report"] as Dictionary<string, string>, "Key", "Value"), "--Select Report --", new { @class = "form-control chosen-select" })

        </div>
    </div>
    <input type="button" value="Ok" id="search" />
    <div id="searchResults"></div>


</div>


@section scripts{
    <script type="text/javascript" language="javascript">

        function ApplyScript()
        { debugger;

            $('#example').dataTable({
                aLengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
                "iDisplayLength": -1,
                "sDom": "<'row'<'col-md-3'i><'col-md-3'l><'col-md-6'f>r>t<'row'<'col-md-12'p>>",


                initComplete: function () {
                    this.api().columns([0,1]).every(function () {
                        var column = this;
                        var select = $('<select><option value="">All</option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                        select.chosen('chosen-select')
                    });
                },






            });


        }

        $(function () {




            var url = '@Url.Action("_StudentStayHistory", "Student")';
            $('#search').click(function () {
                var StudentID = @Model.stu.ID;
                var reportID = $('#ReportsID').val();

                $('#searchResults').load(url, { id: StudentID ,ReportID:reportID});
                ApplyScript();

            });





        });
    </script>

}