JSON показывает в браузере, но не загружается в HTML-таблицу с плагином DataTables?
У меня есть простое приложение MVC, которое получает данные из таблицы базы данных и отображает их в виде таблицы HTML. Когда я пытался использовать обработку на стороне сервера, данные возвращались, но они отображались в браузере вместо моей таблицы.
Вот сценарий:
<script>
$(document).ready(function () {
$('#patients').dataTable({
"bServerSide":true,
"bProcessing":true,
"sAjaxSource": '@Url.Action("Index","Patient")',
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
Вот таблица HTML:
<table width="100%" id="patients">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Вот мой метод действия контроллера:
public ActionResult Index()
{
List<Patient> patients = new List<Patient>();
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=> new[] {x.FirstName,x.LastName})
},JsonRequestBehavior.AllowGet);
}
}
Вот JSON, который показывает в браузере:
{"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"]]}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Patients","Index","Patient")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/table")
@RenderSection("scripts", required: false)
</body>
</html>
2 ответа
У вас есть несколько вариантов здесь:
Если у вас есть данные для вашей таблицы данных, когда вы загружаете страницу, вам, вероятно, следует просто использовать модель для переноса данных и ввести их в таблицу.
Если вам нужно загружать данные асинхронно, вы хотите создать различные действия на вашем контроллере - одно для загрузки вашей страницы (в данном случае действие Index), а второе - для получения данных для таблицы данных. То, что вы видите, является результатом попытки использовать одно действие для выполнения обоих.
Действие для получения данных должно выглядеть следующим образом:
public JsonResult PatientsData()
{
List<Patient> patients = new List<Patient>() {
new ListItem() { FirstName= "1", LastName = "VA" }
};
return Json(new
{
aaData = patients.Select(x=> new[] {x.FirstName,x.LastName})
},JsonRequestBehavior.AllowGet);
}
Затем вы можете настроить свои данные как:
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '~/Controller/PatientsData'
} );
} );
Привет! Вам нужно создать таблицу HTML из результата JSON:
function CreateDynamicTable(objArray) {
//var array = JSON.parse(objArray);
var array = objArray;
var str = '<table class="display" cellpadding="0" cellspacing="0" border="0" id="example">';
str += '<thead><tr>';
for (var index in array[0]) {
str += '<th scope="col">' + index + '</th>';
}
str += '</tr></thead>';
str += '<tbody>';
for (var i = 0; i < array.length; i++) {
str += (i % 2 == 0) ? '<tr class="gradeA">' : '<tr class="gradeA">';
for (var index in array[i]) {
str += '<td>' + array[i][index] + '</td>';
}
str += '</tr>';
}
str += '</tbody>'
str += '<tfoot><tr>';
for (var index in array[0]) {
str += '<th scope="col">' + index + '</th>';
}
str += '</tr></tfoot>';
str += '</table>';
return str;
}
Скрипт для создания Datatable
$.ajax({
type: 'POST',
url: '/Index/Patient',
contentType: 'application/json; charset=UTF-8',
dataType: 'json',
success: function (data) {
if (data != null) {
var objlist = JSON.parse(data);
//if no Data
if (objlist.toString() != '') {
var str = CreateDynamicTable(objlist );
//Create HTML Table in DIV
$("#bind").html(str);
//Create datatable
$('#example').dataTable({
"sPaginationType": "full_numbers"
});
}
else {
//if no Data
}
}
}
});
И Ваш HTML:
<div id="bind">
<table width="100%" id="patients">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>