Suggested Videos
Part 108 - jQuery datatable show hide columns
Part 109 - jQuery datatables stored procedure for paging sorting and searching
Part 110 - asp.net generic handler return json
In this video we will discuss implementing server-side processing for jQuery datatables plugin. This is continuation to Parts 109 and 110. Please watch Parts 109 and 110 from jQuery tutorial before proceeding.
Here is the request and response cycle
jQuery datatables plugin sends the request to the ASP.NET generic handler on the web server.
The ASP.NET generic handler will then call the stored procedure in the database. Retrieves the data and converts it to JSON format.
The JSON formatted data will then be displayed on the page by the jQuery datatables plugin
Step 1 : Add a WebForm to your Demo project.
Step 2 : Copy and paste the following HTML and jQuery code on the webform. Notice that we have set bServerSide option to true. This will tell the jQuery datatables plugin to use server-side processing. We also have set sAjaxSource to EmployeeDataHandler.ashx. This option tells the jQuery datatables plugin about the external source from where the data needs to be loaded.
In our next video, we will discuss implementing server-side processing for jQuery datatables plugin using asp.net web service.
Part 108 - jQuery datatable show hide columns
Part 109 - jQuery datatables stored procedure for paging sorting and searching
Part 110 - asp.net generic handler return json
In this video we will discuss implementing server-side processing for jQuery datatables plugin. This is continuation to Parts 109 and 110. Please watch Parts 109 and 110 from jQuery tutorial before proceeding.
Here is the request and response cycle
jQuery datatables plugin sends the request to the ASP.NET generic handler on the web server.
The ASP.NET generic handler will then call the stored procedure in the database. Retrieves the data and converts it to JSON format.
The JSON formatted data will then be displayed on the page by the jQuery datatables plugin
Step 1 : Add a WebForm to your Demo project.
Step 2 : Copy and paste the following HTML and jQuery code on the webform. Notice that we have set bServerSide option to true. This will tell the jQuery datatables plugin to use server-side processing. We also have set sAjaxSource to EmployeeDataHandler.ashx. This option tells the jQuery datatables plugin about the external source from where the data needs to be loaded.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.11.2.js"></script>
<link rel="stylesheet" type="text/css"
href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#datatable').DataTable({
columns: [
{ 'data': 'Id' },
{ 'data': 'FirstName' },
{ 'data': 'LastName' },
{ 'data': 'Gender' },
{ 'data': 'JobTitle' }
],
bServerSide: true,
sAjaxSource: 'EmployeeDataHandler.ashx'
});
});
</script>
</head>
<body style="font-family:
Arial">
<form id="form1" runat="server">
<div style="width: 900px; border: 1px solid black; padding: 3px">
<table id="datatable">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Job Title</th>
</tr>
</tfoot>
</table>
</div>
</form>
</body>
</html>
In our next video, we will discuss implementing server-side processing for jQuery datatables plugin using asp.net web service.
Great tutorials. Excellent quality and explained very well. Thank you.
ReplyDeleteI followed your code as much as possible. If i am hard coding table data, the jQuery DataTable works perfectly. However when i add in my generic handler, the data pulls from my access database, but the qQuery DataTable will not sort or search properly. Any ideas why this would happen?
Can u Provide me Code ???? How i can Delete the Record from database after Server Side Paging . Actualy i have a Delete code of data table But the problem is occuring when i delete the record from database my current page refresh is not working For Exp: i have 10 record on 5 page after deleting the record page show 9 records. Page not refresh please Send me Code of Deleting the Record from data table and Page Will Show 10 records My Email Id : vishalmahajan51@yahoo.com
ReplyDeletevar result = new
ReplyDelete{
iTotalRecords = GetEmployeeTotalCount(),
iTotalDisplayRecords = filteredCount,
aaData = listEmployees
};
kindly convert into vb
ReplyDeleteGood job. You have really solved my problem of years. I followed your method but can you please share with me the store procedure "spGetEmployees" for better understanding. Thanks.
ReplyDeleteThank you. The stored procedure should be in of the previous videos in jQuery tutorial. I do not remember which Part. Here is the complete course. Please take a look at the previous parts.
DeleteComplete jQuery tutorial
hello there, i want to thank you, i already get it in oracle sql, but i have acheckbox in the column 0, and it get error, so i do not if anyone can help me.
ReplyDelete