我有一个DataTable,它在页面打开时显示所有记录。之后,当我在DropDownList中选择一个项目时,我需要过滤这些值。过滤工作正常,但我在刷新DataTable时遇到问题。我正在返回正确的JSON,但我不知道如何显示它并刷新DataTable。当我单击我的按钮时,它会执行get方法并返回JSON,我需要将其放入DataTable中。我怎么能这样做?
这是我的控制器代码:
public ActionResult GetData(int? izabranaZgrada)
{
ViewData["lista"] = GetAllZgrade();
if (izabranaZgrada == null || izabranaZgrada == 0)
// return View(GetAllKorisnik());
return Json(new { data = GetAllKorisnik() }, JsonRequestBehavior.AllowGet);
else
return Json(new { data = GetAllKorisnik().Where(zgr => zgr.id_zgrade == izabranaZgrada) }, JsonRequestBehavior.AllowGet);
}
这是我的观点:
<p>
@Html.ActionLink("Create New", "Create")
</p>
<p>
@using (Html.BeginForm("GetData", "Korisnik", FormMethod.Get))
{
<table>
<tr>
<td>
@Html.DropDownList("izabranaZgrada", new SelectList((System.Collections.IEnumerable)ViewData["lista"], "id", "naziv"), "Izaberite zgradu", htmlAttributes: new { @class = "form-control" })
</td>
<td><input type="submit" value="Pretraga" /></td>
</tr>
</table>
}
</p>
<table class="table table-striped table-condensed" id="tableKorisnik">
<thead>
<tr>
<th>
Ime i prezime
</th>
<th>
JMBG
</th>
<th>
Broj stana
</th>
<th>
Kvadratura
</th>
<th></th>
</tr>
</thead>
</table>
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
@section scripts{
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script>
var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#tableKorisnik").DataTable({
"ajax": {
"url": "/Korisnik/GetData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "imePrezime" },
{ "data": "jmbg" },
{ "data": "brStana" },
{ "data": "kvadratura" },
{"data": "ID", "render": function (data) {
return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit","Employee")/" + data + "')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm 'style='margin-left:5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>"
},
"orderable": false,
"searchable": false,
"width": "150px"
}],
"language": {
"emptyTable": "No data. <b>Add new</b>"
}
});
});
</script>
}
答案 0 :(得分:1)
我找到了两个解决方案。一种是创建局部视图,并且会有DataTable。在按钮上单击,您将调用该视图,它将按原样呈现它。 但是如果你想在一个视图中拥有它,解决方案是这样的: 有一个单击按钮时调用的JS函数,并使用DropDown中的值通过它的索引搜索列。这样你就不会再调用ajax,这可能很好。
这是按钮和DropDown的定义视图中的代码:
<table>
<tr>
<td>
@Html.DropDownList("izabranaZgrada", new SelectList((System.Collections.IEnumerable)ViewData["lista"], "id", "naziv"), "Izaberite zgradu", htmlAttributes: new { @class = "form-control" })
</td>
<td><input type="button" value="Pretraga" id="bPretraga" /></td>
</tr>
</table>
这是表格和搜索的JS代码
<script>
var Popup, dataTable;
$(document).ready(function () {
$("#tableKorisnik").DataTable({
"ajax": {
"url": "/Korisnik/GetData",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "imePrezime" },
{ "data": "jmbg" },
{ "data": "brStana" },
{ "data": "kvadratura" },
{ "data": "id_zgrade"},
{"data": "ID", "render": function (data) {
return "<a class='btn btn-default btn-sm' onclick=PopupForm('@Url.Action("AddOrEdit","Employee")/" + data + "')><i class='fa fa-pencil'></i> Edit</a><a class='btn btn-danger btn-sm 'style='margin-left:5px' onclick=Delete(" + data +")><i class='fa fa-trash'></i> Delete</a>"
},
"orderable": false,
"searchable": false,
"width": "150px"
}],
"columnDefs": [{
"targets": [4],
"visible": false
}
],
"language": {
"emptyTable": "No data. <b>Add new</b>"
}
});
});
$("#bPretraga").click(function () {
var xh = $("#izabranaZgrada").val();
var table = $("#tableKorisnik").DataTable();
/* table.search(xh).draw();*/
table.columns(4).search(xh).draw();
});