Monthly Archives: February 2018

Basic Understanding of Using JQuery DataTable Server Side And Asp.Net

Intro

JQuery DataTable definition taken from https://datatables.net/ that DataTables is a plug-in for the jQuery Javascript library.
It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Common example of basic usage on JQuery DataTable is not Server side processing. You can imagine it is a data collection method that retrieve all data represent as Json string and stored in the DataTable.
So paging, searching, ordering are fully client side processing. This is handy if the data is not large enough.

On the other hand, Server Side processing in JQuery DataTable take data partially based on user request.
Pagination queries data in between start & end records in that page.
Searching will search data on fields usualy with Sql Like also Ordering will do Sql Order by.
All data taken from database server dynamically.

However, this server side processing could be confusing for someone who just exploring JQuery DataTable.
So this post explains jQuery DataTable server side basic understanding with a simple example.
We will use Newtonsoft component to convert class object to Json string. You need to install it using Nuget package manager.

Example

First of all, we need to include CSS, jQuery and jQuery DataTable javascript in aspx file.

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

And then the html table as DataTable. This table has id example

<table id="example" class="display" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th>Full Name</th>
			<th>Phone Number</th>
			 <th>Fax Number</th>
			<th>Email Address</th>
		</tr>
	</thead>

	</table>

Continue reading