Databases
StackOverflow2013
Postsdbo
POJSON shows in browser, but does not load in the html table with DataTables plugin?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJSON shows in browser, but does not load in the html table with DataTables plugin?
    text
    copied!<p>I have a simple MVC app which gets data from a database table and displays it in the an html table. When I tried to use Server Side processing, the data is returned, but it shows in the browser instead of my table.</p> <p>Here is the script:</p> <pre><code>&lt;script&gt; $(document).ready(function () { $('#patients').dataTable({ "bServerSide":true, "bProcessing":true, "sAjaxSource": '@Url.Action("Index","Patient")', "bJQueryUI": true, "sPaginationType": "full_numbers" }); }); &lt;/script&gt; </code></pre> <p>Here is the html table:</p> <pre><code>&lt;table width="100%" id="patients"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;First Name&lt;/th&gt; &lt;th&gt;Last Name&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Here is my controller action method:</p> <pre><code> public ActionResult Index() { List&lt;Patient&gt; patients = new List&lt;Patient&gt;(); using (SqlConnection conn = new SqlConnection("Server=server;Database=db;Trusted_Connection=True")) { conn.Open(); using (SqlCommand cmd = new SqlCommand("SELECT FirstName,LastName FROM Patient",conn)) { SqlDataReader reader = cmd.ExecuteReader(); while (reader.Read()) { patients.Add(new Patient { FirstName = reader["FirstName"].ToString(), LastName = reader["LastName"].ToString() }); } } } return Json(new { aaData = patients.Select(x=&gt; new[] {x.FirstName,x.LastName}) },JsonRequestBehavior.AllowGet); } } </code></pre> <p>Here is the JSON that shows in the broswer:</p> <pre><code>{"aaData":[["Tom","Jones"],["Jerry","Jones"],["Jack","Roberts"],["Harry","Truman"],["Bill","Clinton"],["Barrack","Obama"],["George","Bush"],["Ed","Lee"],["Michael","Jordan"],["James","Caan"],["Rick","Reilly"],["Johhny","B.Goode"]]} &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;@ViewBag.Title - My ASP.NET MVC Application&lt;/title&gt; &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt; &lt;meta name="viewport" content="width=device-width" /&gt; @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;div class="content-wrapper"&gt; &lt;div class="float-left"&gt; &lt;p class="site-title"&gt;@Html.ActionLink("your logo here", "Index", "Home")&lt;/p&gt; &lt;/div&gt; &lt;div class="float-right"&gt; &lt;section id="login"&gt; @Html.Partial("_LoginPartial") &lt;/section&gt; &lt;nav&gt; &lt;ul id="menu"&gt; &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt; &lt;li&gt;@Html.ActionLink("Patients","Index","Patient")&lt;/li&gt; &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt; &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; &lt;div id="body"&gt; @RenderSection("featured", required: false) &lt;section class="content-wrapper main-content clear-fix"&gt; @RenderBody() &lt;/section&gt; &lt;/div&gt; &lt;footer&gt; &lt;div class="content-wrapper"&gt; &lt;div class="float-left"&gt; &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET MVC Application&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/footer&gt; @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/table") @RenderSection("scripts", required: false) &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload