Hi alya14,
To bind DataTable you need to return List from JsonResult.
Check the below example and modify your code accordint to it.
For this example i have used Northwind database Employee Table. You can download and install using below article.
Download Northwind Database
Model
public class EmployeeModel
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult IndexFilter(int ID)
{
using (NorthwindEntities db = new NorthwindEntities())
{
List<EmployeeModel> employee = new List<EmployeeModel>();
var status = "Ok";
try
{
employee = db.Employees.Where(x => x.EmployeeID == ID)
.Select(x => new EmployeeModel
{
Id = x.EmployeeID,
FirstName = x.FirstName,
LastName = x.LastName,
City = x.City
}).ToList();
}
catch (Exception mesaj)
{
status = mesaj.Message;
}
return Json(new { status = status, data = employee }, JsonRequestBehavior.AllowGet);
}
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript">
function ApplyDataTable(id) {
$.ajax({
url: '/Home/IndexFilter',
type: 'GET',
dataType: 'json',
data: { ID: id },
success: function (data) {
$('#tblFilter').DataTable({
"bDestroy": true,
"aaData": data.data,
"lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true,
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
var oSettings = this.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
return nRow;
},
"columns": [{ "data": "Id", "autoWidth": true },
{ "data": "FirstName", "autoWidth": true },
{ "data": "LastName", "autoWidth": true },
{ "data": "City", "autoWidth": true }
],
columnDefs: [{
targets: 3,
render: function (data, type, row, meta) {
return data;
}
}],
"language": { "emptyTable": "No Events Found Related To This User" }
})
}, error: function (response) {
alert(response.responseText);
}
});
}
function UserChanged() {
var id = $("#txtID").val();
if (id != '') {
ApplyDataTable(id);
}
}
</script>
</head>
<body>
<input type="text" id="txtID" name="txtID" />
<button id="btnGets" name="btnGets" onclick="UserChanged()">Get Data</button>
<br />
<table id="tblFilter" class="table table-bordered table-striped" width="100%">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
</tr>
</thead>
</table>
</body>
</html>
Screenshot
