Having an Issue with Individual Column Searching
Having an Issue with Individual Column Searching
Hello, I am fairly new to Datatables and honestly all coding in general. By following a plethora of tutorials, I have created an ASP.NET Core MVC in which data is loaded through a Json from a method in a controller to an index view in which the DataTable is located.
I am trying to implement individual column searching. I have the text boxes located in the footer and I can tell that the DataTable is processing the requests when I try to search, but it doesn't provide any results. Here is my code:
Datatable from Index -
<script>
$(document).ready(function ()
{
// Setup - add a text input to each footer cell
$('#Students tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
//DataTable
var table = $('#Students').DataTable({
"dom": '<"top"Bf>rt<"bottom"lp><"clear">',
buttons: [{
extend: 'excelHtml5',
autoFilter: true,
}],
"serverSide": true,
"processing": true,
"filter": true,
"ordering": true,
"orderMulti": false,
"paging": true,
"ajax": {
"url": "/Student/LoadData",
"type": "POST",
async: true,
"datatype": "json"
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
}],
scrollY: true,
scrollX: true,
scrollCollapse: false,
"columns": [
{ "data": "ID", "name": "ID", "autoWidth": true },
{ "data": "FirstName", "name": "FirstName", "autoWidth": true },
{ "data": "LastName", "name": "LastName", "autoWidth": true },
{ "data": "Activity", "name": "Activity", "autoWidth": true, "searchable": true },
{ "data": "Gender", "name": "Gender", "autoWidth": true },
{ "data": "Ethnicity", "name": "Ethnicity", "autoWidth": true },
{ "data": "International", "name": "International", "autoWidth": true },
{ "data": "DualDegree", "name": "DualDegree", "autoWidth": true },
{ "data": "EducationStatus", "name": "EducationStatus", "autoWidth": true },
{ "data": "MonthsWorkExp", "name": "MonthsWorkExp", "autoWidth": true },
{ "data": "GPA", "name": "GPA", "autoWidth": true},
{ "data": "GMAT", "name": "GMAT", "autoWidth": true},
{ "data": "University", "name": "University", "autoWidth": true },
{ "data": "UndergradMajor", "name": "UndergradMajor", "autoWidth": true },
{ "data": "Concentration", "name": "Concentration", "autoWidth": true },
{ "data": "BannerID", "name": "BannerID", "autoWidth": true },
{ "data": "StreetAddress", "name": "StreetAddress", "autoWidth": true },
{ "data": "City", "name": "City", "autoWidth": true },
{ "data": "State", "name": "State", "autoWidth": true },
{ "data": "ZipCode", "name": "ZipCode", "autoWidth": true },
{ "data": "PhoneNumber", "name": "PhoneNumber", "autoWidth": true },
{ "data": "EmailAddress", "name": "EmailAddress", "autoWidth": true },
{ "data": "DateOfBirth", "name": "DateOfBirth",
"render": function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
},
"autoWidth": true },
{ "data": "SemesterAdvising", "name": "SemesterAdvising", "autoWidth": true },
{ "data": "ProjectedGraduation", "name": "ProjectedGraduation", "autoWidth": true },
{ "data": "Entry", "name": "Entry", "autoWidth": true },
{ "title": "Actions",
"searchable": false,
"sortable": false,
"render": function (data, type, full, meta) {
return '<a href="@Url.Action("Edit","Student")/' + full.ID + '">Edit</a> | <a href="@Url.Action("Details","Student")/' + full.ID + '">Details</a> | <a href="@Url.Action("Delete","Student")/' + full.ID + '">Delete</a>';
}
}
]
});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
});
</script>
Method from Controller -
public IActionResult LoadData()
{
try
{
var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
// Skiping number of Rows count
var start = Request.Form["start"].FirstOrDefault();
// Paging Length 10,20
var length = Request.Form["length"].FirstOrDefault();
// Sort Column Name
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
// Sort Column Direction ( asc ,desc)
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
// Search Value from (Search box)
var searchValue = Request.Form["search[value]"].FirstOrDefault();
//Paging Size (10,20,50,100)
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
// Getting all Student data
var studentData = (from tempstudent in _context.Student
select tempstudent);
//Sorting
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
{
studentData = studentData.OrderBy(sortColumn + " " + sortColumnDirection);
}
//Search
if (!string.IsNullOrEmpty(searchValue))
{
studentData = studentData.Where(m => m.LastName.ToLower().Contains(searchValue.ToLower()));
}
//total number of rows count
recordsTotal = studentData.Count();
//Paging
var data = studentData.Skip(skip).Take(pageSize).ToList();
//Returning Json Data
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });
}
catch (Exception)
{
throw;
}
}
If anyone could help me with this, I would be greatly appreciative. Thanks.