Hi malar,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class Customer
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
Controller
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult AjaxMethod()
{
NorthwindEntities entity = new NorthwindEntities();
List<Customer> customers = entity.Customers.ToList();
List<SelectListItem> countries = entity.Customers.Select(x => new SelectListItem { Text = x.Country, Value = x.Country }).Distinct().ToList();
object[] data = new object[] { customers, countries };
return Json(JsonConvert.SerializeObject(data));
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div class="container">
Name: <input type="text" id="txtSearch" />
<table id="tblCustomers" class="table">
<thead>
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript">
$(function () {
var oTable;
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var datas = eval(response);
oTable = $("#tblCustomers").DataTable({
bLengthChange: true,
lengthMenu: [[5, 10, -1], [5, 10, "All"]],
bFilter: true,
bSort: true,
bPaginate: true,
data: datas[0],
columns: [
{ 'data': 'CustomerID', 'searchable': false },
{ 'data': 'ContactName' },
{ 'data': 'City' },
{
'data': 'Country', 'searchable': false,
render: function (data, type, row, meta) {
var country = data.toLowerCase();
var countries = $("<select></select>");
$.each(datas[1], function (i, item) {
var option = $("<option />");
option.html(this.Text);
option.val(this.Value);
if (this.Text.toLowerCase() == country) {
option.attr("selected", "selected")
}
countries.append(option);
});
return countries[0].outerHTML;
}
}
],
fnRowCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData.Country == "Mexico") {
$('td', nRow).css('background-color', '#D2D2D2');
} else {
$('td', nRow).css('background-color', 'Orange');
}
}
});
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
$('#txtSearch').keyup(function () {
oTable.search($(this).val()).draw();
})
});
</script>
</body>
</html>
Screenshot
