I am working on a ASP.Net Core MVC App and I am using JQuery Datatable in my app. I am looking for a way to implement column filtering exact like Excel. This is my table :
<table class="table display table-bordered" id="DATATABLE">
</table>
Inside the script tag, below code
$("#DATATABLE").DataTable({
serverSide: true,
filter: true,
searchDelay: 1000,
scrollY: StaticData.TABLE_HEIGHT + 'px',
lengthMenu: StaticData.TABLE_PAGE_SIZE,
language: { searchPlaceholder: "Name, Teacher" },
scrollCollapse: true,
ajax: {
url: '/STUD_MANAGEMENT/LoadStud',
type: 'GET',
datatype: 'json',
headers: { 'RequestVerificationToken': 'your json token' },
data: (d) => {
return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir }
},
beforeSend: () => { ShowLoader(); },
complete: () => { HideLoader(); },
dataSrc: (json) => {
json = json.data;
return json;
}
},
columnDefs: [{ className: "dt-center", targets: [1,2,3,4], width: '2%',
}],
columns: [
{ data: 'STUD_ID', title: 'STUD ID', autoWidth: false, visible: false },
{ data: 'CLASS_ID', title: 'CLASS ID', autoWidth: false, visible: false },
{ data: 'NAME', title: 'Name', autoWidth: true, searchable: true },
{ data: 'AGE', title: 'Age', autoWidth: true },
{ data: 'TEACHER', title: 'Teacher', autoWidth: true },
]
});
And the LoadStud() method in Controller is shown below :
public IActionResult LoadStud(int draw = 1, int start = 0, int length = 10,
string search = "", string FilterByColumn = "", string ASC_DSEC = "")
{
List<STUD_MANAGEMENT> ListData = new List<STUD_MANAGEMENT>();
int recordsTotal = 0;
STUD_MANAGEMENT dm = new STUD_MANAGEMENT();
dm.STUD_ID = 1;
dm.CLASS_ID = 1;
dm.NAME = "James";
dm.TEACHER = "SEPHORA";
dm.AGE = "12";
STUD_MANAGEMENT dm1 = new STUD_MANAGEMENT();
dm1.STUD_ID = 2;
dm1.CLASS_ID = 2;
dm1.NAME = "Naneem";
dm1.TEACHER = "Chithra";
dm1.AGE = "15";
STUD_MANAGEMENT dm11 = new STUD_MANAGEMENT();
dm11.STUD_ID = 3;
dm11.CLASS_ID = 3;
dm11.NAME = "Sony";
dm11.TEACHER = "Mano USA";
dm11.AGE = "3";
ListData.Add(dm);
ListData.Add(dm1);
ListData.Add(dm11);
recordsTotal = ListData.Count();
var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal
= recordsTotal, data = ListData };
return Ok(jsonData);
}
And STUD_MANAGEMENT class is shown below:
public class STUD_MANAGEMENT
{
public int STUD_ID { get; set; }
public int CLASS_ID { get; set; }
public string NAME { get; set; }
public int AGE { get; set; }
public string TEACHER { get;set; }
}
How to implement column filter EXACT like in the Excel ???