jQuery Table with .NET Core MVC (Grid View Data Representations) | Sukhraj

In this video I have explained, How to use Jquery DataTable with Searching, Paging and Sorting in .net Core MVC.
AWS - shorturl.at/gpLP4
AWS with C# - bit.ly/3CO0obM
#jQueryTable #DotNetCoreMVC

[@SukhrajMohammad]

$(document).ready(function () {
$("#empTable").dataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Home/GetData",
"type": "POST",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "EmployeeID","autoWidth": true },
{ "data": "FirstName", "autoWidth": true },
{ "data": "LastName", "autoWidth": true },
{ "data": "Education", "autoWidth": true },
{ "data": "City", "autoWidth": true },
{
"render": function (data, type, row, meta)
{ return 'Edit'; }
},
{
data: null,
render: function (data, type, row) {
return "Delete";
}
},
]
})
});
function DeleteData(EmployeeID) {
if (confirm("Are you sure you want to delete ...?")) {
Delete(EmployeeID);
} else {
return false;
}
}
function Delete(EmployeeID) {
var url = '@Url.Content("~/")' + "Home/Delete";
$.post(url, { ID: EmployeeID }, function (data) {
if (data) {
oTable = $('#empTable').DataTable();
oTable.draw();
} else {
alert("Something Went Wrong!");
}
});
}

[@shifamalik3021]

Keep it up!

[@AmirKhan-sh7tb]

Nyc

[@joydeepsingh1681]

Nicely explained!

[@SukhrajMohammad]

Glad it was helpful!

[@techplusglobalsolutions4956]

👍

[@mohammadrezakazemiesfeh2294]

Thanks

[@allayornasriddinov4256]

How we should add multiple functions of filter and search

[@kumarchandan019]

I m trying to find the same which explains jQuery table

[@khoantum]

Do you have sample project & code available so we don't have to write it all out to test this method?

[@SukhrajMohammad]

unfortunately, not available at the moment

[@bkcy18]

Is there a server side implementation for this? I've a table with huge amount of data that is growing every year. Fetching all the records at once is out of the question.

[@SukhrajMohammad]

Yes, we can use pagination with server side logic, where we will use logic to get data for current page only,but in that case sorting and search also post back to server to get data..

[@user-dg8bs7zf1i]

why are you using [HttepPost] verb for getting the data from database?

[@SukhrajMohammad]

Because mine C# code function is with httpPost , you can try with Get,it will work...

[@masumehoseini8370]

hi, thankyou for video
but where is the next session?
because your result id different from table in start of video

[@SukhrajMohammad]

Next session was not uploaded but you can find the code in pinned comment

[@codingislife6387]

2:02 GetAllEmployee() ===> unable to understand

[@SukhrajMohammad]

GetAllEmployees is function/method written in C# code to get list of Employees from database,
It is returning List and then I am converting this collection to json format and returning back to jQuery Datatable

[@charlesmcclellan8212]

@@SukhrajMohammad I am new and trying to understand this as well. How does the function in the Home Controller access the GetAllEmployee list? This is at 13 minutes and 14 seconds on line 31 of the HomeController

[@SukhrajMohammad]

GetAllEmployee() is private method inside the controller which is returning the list of Employees. For demo purpose I have created this method inside the controller otherwise we should have this method in service class and using service class instance should call in Controller.