Individual Column Searching Not Working Properly(Server-Side)
Individual Column Searching Not Working Properly(Server-Side)
mvcuser
Posts: 6Questions: 0Answers: 0
Hello everyone,
I want to use search by text inputs. When I write something to inputs, always my JqDataTable sSearch_0 data is filling, others are blank. Where is my wrong ?
Link is here ;
https://datatables.net/examples/api/multi_filter.html
My DataTable class ;
public class JqDataTable
{
public string sEcho { get; set; }
public string sSearch { get; set; }
public int iDisplayLength { get; set; }
public int iDisplayStart { get; set; }
public int? iColumns { get; set; }
public int? iSortingCols { get; set; }
public string sColumns { get; set; }
public int iSortCol_0 { get; set; }
public string sSortDir_0 { get; set; }
public string sSearch_0 { get; set; }
public string sSearch_1 { get; set; }
public string sSearch_2 { get; set; }
public string sSearch_3 { get; set; }
}
Table and javascripts ;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var table = $('#dtbl').DataTable({
scrollY: 300,
scroolX: 100,
aoColumns: [
{ 'data': 'Name' },
{ 'data': 'City' },
{ 'data': 'State' },
{ 'data': 'Country' },
],
bFilter: true,//Enables Filtering
bServerSide: true,
sAjaxSource: "/Home/EmployeeList"
});
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<table id="dtbl" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>State</th>
<th>Country</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th><input type="search" placeholder="Search Name"></th>
<th><input type="search" placeholder="Search city"> </th>
<th><input type="search" placeholder="Search state"></th>
<th><input type="search" placeholder="Search country"></th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
Controller ;
public ActionResult EmployeeList(JqDataTable model)
{
using (var context = new MyDbDataContext())
{
var employees = (from n in context.Employees select n);
var count = employees.Count();
if (!(string.IsNullOrEmpty(model.sSearch)) && !(string.IsNullOrWhiteSpace(model.sSearch)))
{
employees = employees.Where(x => x.Name.Contains(model.sSearch) || x.City.Contains(model.sSearch) || x.State.Contains(model.sSearch));
}
//Name Column Filtering
if (!(string.IsNullOrEmpty(model.sSearch_0)) && !(string.IsNullOrWhiteSpace(model.sSearch_0)))
{
employees = employees.Where(x => x.Name.Contains(model.sSearch_0));
}
//City Column Filtering
if (!(string.IsNullOrEmpty(model.sSearch_1)) && !(string.IsNullOrWhiteSpace(model.sSearch_1)))
{
employees = employees.Where(x => x.City.Contains(model.sSearch_1));
}
//State Column Filtering
if (!(string.IsNullOrEmpty(model.sSearch_2)) && !(string.IsNullOrWhiteSpace(model.sSearch_2)))
{
employees = employees.Where(x => x.State.Contains(model.sSearch_2));
}
var emplist = employees.Skip(model.iDisplayStart).Take(model.iDisplayLength).ToList();
var result = new
{
iTotalRecords = emplist.Count(),//records per page
iTotalDisplayRecords = count, //total table count
aaData = emplist //employee list
};
return Json(result,JsonRequestBehavior.AllowGet);
}
}
This discussion has been closed.
Replies
@colin Can you look my codes again ?
You seem to have ignored Colin's reply to your other post:
@tangerine I found the solution.
I added initComplete after sAjaxSource. Thanks for helping guys.