DataTable in Jquery

In my previous post, I was already post about the implementation of dataTable in MVC, Click Here for my previous post.

Here I am discussed about the implementation of dataTable in MVC. It provides paging, sorting, filtering on the client side. Here we use Ajax for retrieving the data from server side. Here we see how to implement jquery datatable in mvc application. This process is very simple and easy. For implementation of datatable in jquery follow this below steps:

Step-1:
First create an MVC Application. Then add your database in ADO.net entity model. Then add a controller in your controller folder and add view page of that controller.

Step-2:
Then Go to your nuget package and Install "DataTables.net jquery plugin" for jquery datatable and also install “Jquery” for supporting jquery scripts. And then add the reference to your view page.Then add following script reference link in your view page.

Script Reference:<script src="/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href=" /css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src=" /js/jquery.dataTables.min.js"></script>

Step-3:

Now write HTML table in view page. Follow below HTML code.

<div class="table-responsive voffset3">
<table class="table table-advance" id="tblVideoReport">
<thead>
<tr>
<th>Sl No.</th>
<th>User</th>
<th>Report Type</th>
<th>Total Time</th>
<th>Report Date</th>
<th>Inserted Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

Step-4:
After that write a JsonResult method in Controller for retrieving records from database. Here i am using Linq for retrieving data. Follow this below code:

Public JsonResult GetVideoReportList()
{
Db_Entities ob=new Db_Entities();
Var res=ob.tbl_Reports.ToList();
return Json(res,JsonRequestBehavior.AllowGet);
}

Step-5:
Write the ajax post in jquery for calling the controller method. Following is the Script For Retrieving Data:

<script>
$(document).ready(function(){
GetData();
function GetData()
{
$.ajax({
type: "GET",
url: "../School/GetVideoReportList",
datatype: "json",
traditional: true,
success: function (data) {
debugger;
$('#tbdlist').empty();
if (data.length > 0) {
var tr = '';
for (var s = 0; s < data.length; s++) {
tr += '<tr><td>' + (s + 1) + '</td>';
tr += '<td>' + data[s].Customer_Name + '</td>';
tr += '<td>' + data[s].Module_Name + '</td>';
tr += '<td>' + data[s].Video_Time + '</td>';
tr += '<td>' + data[s].ReportDate + '</td>';
tr += '<td>' + data[s].InsertedOn + '</td></tr>';
}
debugger;
var oTable = $('#tblVideoReport').dataTable();
oTable.fnDestroy();
//I put in new values 'newList' on the body
$('#tblVideoReport tbody').html(tr);
//I reinitialize the datatable
$('#tblVideoReport').dataTable({ "oLanguage": { "sSearch": 'Search Here:' } });
}
else {
var oTable = $('#tblVideoReport').dataTable();
oTable.fnDestroy();
//I put in new values 'newList' on the body
$('#tblVideoReport tbody').html('');
//I reinitialize the datatable
$('#tblVideoReport').dataTable({ "oLanguage": { "sSearch": 'Search Here:' } });
}

}
})
}
})
</script>

In this way we can add the datatable in view page of MVC application.

Screenshot:

The data table will shown like this below image. This following image is the previous post output screen, Click Here for my previous post.