Question

I am trying to use the

• datatables plugin,
• mvc3 framework and
• entity framework

for some reason it didn’t render well
the result of this code is an output of the data on the browser like that

[{“ServiceId”:”8e651711-c837-4012-99f5-496549308b95″,”ServiceInstanceId”:”312bf47d-5952-4c32-b1a8-ffdeb30507df”,”MessageRole”:2,”Datetime”:”/Date(1342699946063)/”,”Message”:null,”Status”:null,”ESBErrorCode”:null,”ESBTecnicalErrorCode”:null,”ErrorDescription”:null,”PortName”:null,”MachineName”:null,”Exte

Controller:

    public JsonResult Index()
    {
        var tracks = db.Tracks.Include(t => t.Message).
            Select(n => new
            {
                ServiceId = n.ServiceId,
                ServiceInstanceId = n.ServiceInstanceId,
                MessageRole = n.MessageRole,
                Datetime = n.Datetime,
                Message = n.Message,
                Status = n.Status,
                ESBErrorCode = n.ESBErrorCode,
                ESBTecnicalErrorCode = n.ESBTecnicalErrorCode,
                ErrorDescription = n.ErrorDescription,
                PortName = n.PortName,
                MachineName = n.MachineName,
                ExternalId = n.ExternalId,
                ConsumerMachineName = n.ConsumerMachineName,
                ServiceBehavior = n.ServiceBehavior,
                RouterConsumerId = n.RouterConsumerId
            }); ;

        return Json(tracks.ToList(), JsonRequestBehavior.AllowGet);
    }

View:

@model IEnumerable<Fnx.ESB2.Infra.DataTier.Model.Track>
@{
ViewBag.Title = "ServiceMonitor2.0";
}


 @{
   AjaxOptions ajaxOpts = new AjaxOptions
   {

    UpdateTargetId = "MainTable",
    InsertionMode = InsertionMode.Replace,
    Url = Url.Action("Refresh", "MainScreen"),
    LoadingElementId = "loading",
    LoadingElementDuration = 10000



};        
   }
   @using (Ajax.BeginForm(ajaxOpts))
    { 



<div id="loading" style="display: none; color: Red; font-weight: bold">
    <p>
        Loading Data...</p>
</div>

<div id="header ">
    <form class="well form-search">
    ServicID
    <input type="text" class="input-medium search-query">
    <br />
    <button type="submit" class="btn">
        Search</button>
    </form>
</div>





<table cellpadding="0" cellspacing="0" border="0" width="50%" class="well form-inline" id="MainTable">
    <thead>
        <tr>
            <th>
                ServiceId
            </th>
            <th>
                ServiceInstanceId
            </th>
            <th>
                MessageRole
            </th>
            <th>
                Datetime
            </th>
            <th>
                Message
            </th>
            <th>
                Status
            </th>
            <th>
                ESBErrorCode
            </th>
            <th>
                ESBTecnicalErrorCode
            </th>
            <th>
                ErrorDescription
            </th>
            <th>
                PortName
            </th>
            <th>
                MachineName
            </th>
            <th>
                ConsumerId
            </th>
            <th>
                ExternalId
            </th>
            <th>
                ConsumerMachineName
            </th>
            <th>
                ServiceBehavior
            </th>
            <th>
                RouterConsumerId
            </th>
            <th>
            </th>
        </tr>
    </thead>


            <tbody>

          </tbody>


</table>




    }

Jquery :

     $(document).ready(function () {
      $('#MainTable').dataTable({
     //        "bServerSide": true,
     //        "sAjaxSource": "MainScreen/Index",
     "sAjaxSource": '@Url.Action("Index", "MainScreen")'

    "bProcessing": true,
    "aoColumns": [
                    { "sName": "ServiceId"},
                    { "sName": "ServiceInstanceId"},
                    { "sName": "MessageRole"},
                    { "sName": "Datetime"},
                    { "sName": "Message"},
                    { "sName": "Status"},
                    { "sName": "ESBErrorCode"},
                    { "sName": "ESBTecnicalErrorCode"},
                    { "sName": "ErrorDescription"},
                    { "sName": "PortName"},
                    { "sName": "MachineName"},
                    { "sName": "ExternalId"},
                    { "sName": "ConsumerMachineName"},
                    { "sName": "ServiceBehavior"},
                    { "sName": "RouterConsumerId"}
]
       });

        });

Answer 1

I’m not sure what the issue is. I am going to show you how I did it and then you can modify it accordingly. My way has no fancy features like sorting, filtering, etc. My code is not yet 100% complete, I am also still experimenting with the jQuery datatables.

I have a datatable that displays all of my banks, it just displays the id and the name of the bank.

List view HTML markup for the datatable:

<table id="banks-datatable">
     <thead>
          <tr>
               <th>#</th>
               <th>Name</th>
          </tr>
     </thead>
     <tfoot>
          <tr>
               <th>#</th>
               <th>Name</th>
          </tr>
     </tfoot>
</table>

jQuery:

$(document).ready(function () {
     $('#banks-datatable').dataTable({
          "aoColumns": [
               { "mDataProp": [0], "sWidth": "15%" },
               { "mDataProp": [1], "sWidth": "85%" }
          ],
          "bAutoWidth": false,
          "bFilter": false,
          "bLengthChange": false,
          "bProcessing": true,
          "bServerSide": true,
          "bSort": false,
          "iDisplayLength": 50,
          "sAjaxSource": '@Url.Action("GetAllBanks")'
     });
});

List view action method:

public ActionResult List()
{
     return View();
}

Get all banks action method:

public ActionResult GetAllBanks(DataTableParameterViewModel parameterViewModel)
{
     Check.Argument.IsNotNull(parameterViewModel, "parameterViewModel");

     IEnumerable<Bank> allBanks = bankRepository.FindAll();
     IEnumerable<Bank> filteredBanks = allBanks;

     var result =
          from bank in filteredBanks
          select new[]
          {
               u.Id.ToString(),
               u.Name
          };

     return Json(new
     {
          sEcho = parameterViewModel.sEcho,
          iTotalRecords = allBanks.Count(),
          iTotalDisplayRecords = filteredBanks.Count(),
          aaData = result
     },
     JsonRequestBehavior.AllowGet);
}

DataTableParameterViewModel:

public class DataTableParameterViewModel
{
     public string sEcho { get; set; }

     public int iDisplayStart { get; set; }

     public int iDisplayLength { get; set; }
}

I hope this helps. If it does not help then try breaking down the data that you are sending to the datatable, try sending one column through at a time to see where the issue is.

Here is an article on Code Project that you can read, there are a couple in the series:

Enhancing HTML tables using the jQuery DataTables plug-in