im trying to send and ajax request and returning the result into a new table i debugged the req and i can confirm that evry thing is good except the VIEW the end result is an empty table instead of one row

one more weird thing is if i page source i can see all the table result(more than the one that suppose to)

this is the view:

@model Fnx.Esb.ServiceMonitor.ViewModel.MainModels
@{
ViewBag.Title = "MainSearch";
}
@Html.EditorForModel()
@{
AjaxOptions ajaxOpts = new AjaxOptions
{

    UpdateTargetId = "MainTable",
    InsertionMode = InsertionMode.Replace,
    Url = Url.Action("queryData", "MainSearch"),




   };        
  }

 @using (Ajax.BeginForm(ajaxOpts))
{



<div class="container">
    <form action="#" method="post">
    <div id="mainSearch">
        @Html.EditorFor(x => x.MainSearchModel)
    </div>
    <br />
    <br />
    <br />
    <br />
    <div id="advancedSearch">
        <div class="accordion" id="accordion2">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"           href="#collapseOne">
                        Advanced Search </a>
                </div>
                <div id="collapseOne" class="accordion-body collapse in">
                    <div class="accordion-inner">
                        @Html.EditorFor(x => x.AdvanceSearchContainerModel)
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br />
    <br />

    <button type="submit" class="btn">
        <i class="icon-search"></i> Search
    </button>

     <button type="reset" class="btn">
        <i class="icon-trash"></i> clear
    </button>






    </form>




    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <table id="MainTable" cellpadding="0" cellspacing="0" border="0" class="table table-striped       table-bordered">
        <thead>
            <tr>
                <th>
                    serviceDuration
                </th>
                <th>
                    status
                </th>
                <th>
                    ESBLatency
                </th>
                <th>
                    serviceName
                </th>
                <th>
                    serviceId
                </th>
                <th>
                    startTime
                </th>
                <th>
                    endTime
                </th>
                <th>
                    instanceID
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.MainTableModel)
            {

                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.serviceDuration)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.status)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ESBLatency)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.serviceName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.serviceId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.startTime)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.endTime)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.instanceID)
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
 }

the datatables: javascript options

  $('#MainTable').dataTable({
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
     "bDestroy": true
   });

thanks miki