How can I load a DataTable from JQuery when Search is implemented

hkrishna0711

Hi Friends,

I am developing an application in MVC ASP.Net. I have used Datatables inmy application. I have used model binding for the datatable as follows

Script for Datatable
$('#tblReports').DataTable({
paging: true,
lengthChange: false,
searching: false,
ordering: true,
info: true,
autoWidth: true,
scrollX: true,
dom: 'Bfrtip',
buttons: [
'excel'
]
});

HTML table

<tbl id="tblReports" class="table table-bordered table-hover" style="margin-top:10px;">
<thead>
<tr>
<th> Employee Name </th>
<th>Leave Type</th>
<th>From Date</th>
<th>To Date</th>
<th>No of Days</th>
<th> Is Half Day </th>
<th>Leave Description</th>
<th> Status </th>
<th>Approved By</th>
<th>Approved Date</th>
<th> Rejected By</th>
<th>Rejected Date</th>
<th>Supervisor Comments</th>
</tr>
</thead>
<tbody>
foreach (var leaveDetail in Model)
{
if (leaveDetail.LeaveStatusName != "Save" & leaveDetail.LeaveStatusName != "Cancel")
{
<tr>
<td>leaveDetail.EmployeeName</td>
<td>leaveDetail.LeaveTypeName</td>
<td>leaveDetail.FromDate.ToShortDateString()</td>
<td>leaveDetail.ToDate.ToShortDateString()</td>
<td>
if (leaveDetail.HalfDay != null)
{
if (leaveDetail.ToDate.ToShortDateString() == leaveDetail.FromDate.ToShortDateString())
{
("1");
}
else
{
((leaveDetail.ToDate - leaveDetail.FromDate).TotalDays);
}
}
else
{
("0");
}
</td>
<td>leaveDetail.HalfDay</td>
<td>leaveDetail.EmployeeComments</td>
<td>leaveDetail.LeaveStatusName</td>
<td>leaveDetail.ApprovedBy</td>
<td>leaveDetail.ApprovedDate</td>
<td>leaveDetail.RejectedBy</td>
<td>leaveDetail.RejectedDate</td>
<td>leaveDetail.SupervisorComments</td>
</tr>
}
}
</tbody>
</tbl>

Now I need to load only the Datatable with out refreshing the page. I am loading the all the views in one master view. Could you help me.