I am using Datatables with asp.net get the response from ajax call but error like below please help
I am using Datatables with asp.net get the response from ajax call but error like below please help
jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'length' of undefined
'''[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public string GetTableData()
{
var echo = int.Parse(HttpContext.Current.Request.Params["sEcho"]);
var displayLength = int.Parse(HttpContext.Current.Request.Params["iDisplayLength"]);
var displayStart = int.Parse(HttpContext.Current.Request.Params["iDisplayStart"]);
var sortOrder = HttpContext.Current.Request.Params["sSortDir_0"].ToString(CultureInfo.CurrentCulture);
var roleId = HttpContext.Current.Request.Params["roleId"].ToString(CultureInfo.CurrentCulture);
var records = GetRecordsFromDatabaseWithFilter().ToList();
if (!records.Any())
{
return string.Empty;
}
var orderedResults = sortOrder == "asc"
? records.OrderBy(o => o.ReqNo)
: records.OrderByDescending(o => o.ReqNo);
var itemsToSkip = displayStart == 0
? 0
: displayStart + 1;
var pagedResults = orderedResults.Skip(itemsToSkip).Take(displayLength).ToList();
var hasMoreRecords = false;
var sb = new StringBuilder();
sb.Append(@"{" + "\"sEcho\": " + echo + ",");
sb.Append("\"recordsTotal\": " + records.Count + ",");
sb.Append("\"recordsFiltered\": " + records.Count + ",");
sb.Append("\"iTotalRecords\": " + records.Count + ",");
sb.Append("\"iTotalDisplayRecords\": " + records.Count + ",");
sb.Append("\"aaData\": [");
foreach (var result in pagedResults)
{
if (hasMoreRecords)
{
sb.Append(",");
}
sb.Append("[");
sb.Append("\"" + result.Id + "\",");
sb.Append("\"" + result.ReqName + "\"");
sb.Append("]");
hasMoreRecords = true;
}
sb.Append("]}");
return sb.ToString();
}
private static IEnumerable<tbl_Ticket> GetRecordsFromDatabaseWithFilter()
{
HajtRequestDataContext dataContext = new HajtRequestDataContext();
//var RequestList =
//return RequestList.ToList();
List<tbl_Ticket> mylist = new List<tbl_Ticket>();
var test = (from e in dataContext.tbl_Tickets
select e).ToList();
mylist = test;
return mylist;
}
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
var table = $('#tblData').DataTable({
"filter": false,
"pagingType": "simple_numbers",
"orderClasses": false,
"order": [[0, "asc"]],
"info": false,
"scrollY": "450px",
"scrollCollapse": true,
"bProcessing": true,
"bServerSide": true,
"url": "data.json",
"dataSrc": "aoData",
"sAjaxSource": "WebService.asmx/GetTableData",
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "roleId", "value": "admin" });
alert(sSource);
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function (msg) {
var json = jQuery.parseJSON(msg.d);
alert(msg.d);
fnCallback(msg.d);
$("#tblData").show();
},
error: function (xhr, textStatus, error) {
if (typeof console == "object") {
console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
}
}
});
},
fnDrawCallback: function () {
$('.image-details').bind("click", showDetails);
}
});
})
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">All Admin Request List</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<table id="tblData" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>ReqName</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
Answers
Since you are using an asmx web method, why not create a structure or a class you can reuse that you just serialize and send to the client? I created on that you can see at http://stackoverflow.com/questions/41712770/datatable-showing-wrong-pagination-when-get-data-from-server/41731002#41731002 .