title: How to use JQuery "datatable" plugin server side processing with large data in .NET MVC3 razor views
body: <p>I have a datatable which displays the list of employees. It works fine when I the number of employees in the 0-2000 range but after that there is a serious lag time when loading that page. Which is really not surprizing since it is loading massive amount of data on page load. I looked everywhere and I couldnt find a good example which shows how to do server side processing. The projects that I found on git hub are really not working in my computer(I got a lot of "missing references" errors). This is the code I have working right now</p>
  
  <p>The employees.cshtml</p>
  
  <pre><code>@model EmployeeList
  @{
      Layout = null;
      ViewBag.Title = "employees";
  }
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;head/&gt;
  &lt;body&gt;
        &lt;table id="employees_gridView"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th
                          Name
                      &lt;/th&gt;
                      &lt;th&gt;
                          Username
                      &lt;/th&gt;
                      &lt;th&gt;
                          Job Category
                      &lt;/th&gt;
                      &lt;th&gt;
                          Hire Date
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              @if (Model.RowList != null)
              {
                  foreach (var item in Model.RowList)
                  {
  
  
                  &lt;tr&gt;
                      &lt;td &gt;
                          @Html.DisplayFor(i =&gt; item.DisplayName)
                      &lt;/td&gt;
                      &lt;td &gt;
                          @Html.DisplayFor(i =&gt; item.UserName)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DisplayFor(i =&gt; item.JobCategoryName)
                      &lt;/td&gt;
  
                      &lt;td&gt;
                          @Html.DisplayFor(i =&gt; item.hireDate)                          
                      &lt;/td&gt;
  
                  &lt;/tr&gt;
                  }
              }
              &lt;/tbody&gt;
              &lt;tfoot&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>The datatable jquery looks like this</p>
  
  <pre><code>$(document).ready(function(){
  $('#employees_gridView').dataTable({
              "bDestroy":true,
              "bSortClasses": false,
              "bDeferRender": true,  
              // here is the default setting for number of results to show on a page
              "iDisplayLength": 10,
              "bJQueryUI": true,  
              "sPaginationType": "full_numbers",
  
              "aaSorting" :[],
              // here are the column specific settings
              "aoColumns": [
              {"aTargets": [ 0,1 ]},
                           null,
                           {"sClass": "DataTableCenterColumn"},   
                           {"sType":"date", "sClass": "DataTableCenterColumn" 
               }]
          });
  });
  </code></pre>
  
  <p>And this is the controller method which processes the page load request</p>
  
  <pre><code>public ActionResult Index()
      {
          EmployeeList employeeList = getEmployeeList();
          return View("Index", employeeList );
      }
  </code></pre>
  
  <p>Can someone please show me how I can change this client side datatable to a server side processing datatable.</p>