Hi sutharvish,
Remove the tbody section from your html.
For server side paging you have to use jQuery Ajax to bind the records.
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
$('#tblCustomers').DataTable({
"bServerSide": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"pageLength": "5",
"sAjaxSource": "Default.aspx/GetData",
"aoColumns": [
{ "mData": "CustomerID" },
{ "mData": "ContactName" },
{ "mData": "City" },
{ "mData": "Country" }
],
"fnServerData": function (source, data, callback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": source,
"data": data,
"success": function (response) {
var json = jQuery.parseJSON(response.d);
callback(json);
}
});
}
});
});
</script>
<table id="tblCustomers" class="table table-hover table-bordered table-responsive"
style="font-size: smaller">
<thead>
<tr>
<th>CustomerID</th>
<th>ContactName</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
</table>
Namespaces
C#
using System.Linq;
using System.Text;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.Services;
VB.Net
Imports System.Web.Services
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization
Code
C#
[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static string GetData(string sEcho, int iDisplayStart, int iDisplayLength)
{
NorthwindEntities entities = new NorthwindEntities();
int totalRecord = entities.Customers.Count();
var result = (from customer in entities.Customers
select customer)
.OrderBy(customer => customer.CustomerID)
.Skip(iDisplayStart)
.Take(iDisplayLength).ToList();
JavaScriptSerializer js = new JavaScriptSerializer();
StringBuilder sb = new StringBuilder();
sb.Clear();
sb.Append("{");
sb.Append("\"sEcho\": ");
sb.Append(sEcho);
sb.Append(",");
sb.Append("\"iTotalRecords\": ");
sb.Append(totalRecord);
sb.Append(",");
sb.Append("\"iTotalDisplayRecords\": ");
sb.Append(totalRecord);
sb.Append(",");
sb.Append("\"aaData\": ");
sb.Append(js.Serialize(result));
sb.Append("}");
return sb.ToString();
}
VB.Net
<WebMethod()> _
<ScriptMethod(UseHttpGet:=True)> _
Public Shared Function GetData(ByVal sEcho As String, ByVal iDisplayStart As Integer,
ByVal iDisplayLength As Integer, ByVal sSearch As String) As String
Dim entities As NorthwindEntities = New NorthwindEntities()
sSearch = If(sSearch Is Nothing, "", sSearch)
Dim totalRecord As Integer = entities.Customers.Count()
Dim result = (From customer In entities.Customers
Where customer.Country.Contains(sSearch)
Select customer) _
.OrderBy(Function(customer) customer.CustomerID) _
.Skip(iDisplayStart).Take(iDisplayLength).ToList()
Dim js As JavaScriptSerializer = New JavaScriptSerializer()
Dim sb As StringBuilder = New StringBuilder()
sb.Clear()
sb.Append("{")
sb.Append("""sEcho"": ")
sb.Append(sEcho)
sb.Append(",")
sb.Append("""iTotalRecords"": ")
sb.Append(totalRecord)
sb.Append(",")
sb.Append("""iTotalDisplayRecords"": ")
sb.Append(totalRecord)
sb.Append(",")
sb.Append("""aaData"": ")
sb.Append(js.Serialize(result))
sb.Append("}")
Return sb.ToString()
End Function
Screenshot
