Delay in Data being loaded to Table using Ajax calls and using aaData Javascript array

jaspreetsingh

Hello I am using SQL Server as data source with around 1600 rows in a Table.

I want to display data using DataTables.

For this I have first made Class, Initialized it's properties, Converted Data Tables into List.

Made the Ajax Call to get the Json data.

After that i am pushing that data in Javascript array and showing it in DataTables.

Hosted the Site on our Servers IIS.

Data is being Loaded after 6-10 seconds of delay,
Even i have used Defer Rendering:

Note: Below Code is working fine but giving me delays hence want to resolve that:

Below is the code i am using:

[Serializable]
public class Employee
{
// Yay for 3.5 auto properties
public string EmpID { get; set; }
public string EmpName { get; set; }
public string Salary { get; set; }
}



Web Method for Ajax Call:


[WebMethod]
public static List ServerSideTest()
{
List EmpDataList = new List();
DataTable dt=new DataTable();
SqlConnection sqlCon;
SqlDataAdapter da = new SqlDataAdapter();
DataSet ds = new DataSet();
sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString.Trim());
da.SelectCommand = new SqlCommand("SP_GetListofEmployee", sqlCon);
da.SelectCommand.CommandType = CommandType.StoredProcedure;

da.Fill(ds);
dt = ds.Tables[0];


foreach (DataRow dr in dt.Rows)
{
Employee thisData = new Employee();
thisData.EmpId = dr["EmpId"].ToString();
thisData.EmpName = dr["EmpName"].ToString();
thisData.Salary = dr["Salary"].ToString();

EmpDataList.Add(thisData);
}

return(EmpDataList);

}

Below is Script :


$(document).ready(function () {
function renderTable(result) {
var dtData = [];
// Data tables requires all data to be stuffed into a generic jagged array, so loop through our
// typed object and create one.
$.each(result, function () {
dtData.push([
this.EmpId,
this.EmpName,
this.Salary
]);
});

$('#grid').dataTable({
aaData: dtData,
sPaginationType: "full_numbers",
sScrollX: "100%",
bAutoWidth: false,
sScrollY: "100%",
bDeferRender: true,

aoColumns:
[
{ "sTitle": "EmpId" },
{ "sTitle": "EmpName" },
{ "sTitle": "Salary" },
]


});
}

// Make an AJAX call to the PageMethod in the codebehind
$.ajax({
url: 'Default.aspx/ServerSideTest',
data: '{}',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
// Call the renderTable method that both fills the aaData array with data and initializes the DataTable.
renderTable(result.d);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest + ": " + textStatus + ": " + errorThrown);
}
});




});


Here is asp.net part:














Is working fine. But i am getting 5-8 seconds of delay when data is initially shown on Site opened.

Please Suggest any other technique of Getting data or solution to it. Thanks .

Jaspreet Singh