jquery DataTable sometimes showing error on load

Question

I am showing a list using jquery DataTable on page load, it's working perfectly, but sometimes it's showing error immediately after requesting page. On request, i fetch data from db and passed to DataTable. I shared error screenshot. plz find attachment.

Sachin Singh · Answer

it means on page load you are not getting json data that is specied on Ajax request which causing the error. better is to show your ajax code where you are binding datatable. and also the backend code.

amit panwar · Answer

---------------MVC controller code----------------------------- public ActionResult GetManageMembersGrid(JQueryDataTableParamModel param,bool IsArchived, bool IsDeleted) { IEnumerable MembersList = Enumerable.Empty (); string messageKey = string.Empty, StatusCode = string.Empty; try { TempData["SearchMember"] = param.sSearch; var SortOrderString = param.sColumns.Split(','); param.iSortCol_0 = SortOrderString[Convert.ToInt32(param.iSortCol_0)]; ManageMembersFilterModel FilterModel = new ManageMembersFilterModel { jQueryDataTableParamModel = param, }; ManageMembersListViewModel manageMembersListViewModel = membersBAL.GetManageMembersGrid(FilterModel, IsArchived, IsDeleted); int UserRoleId = UserUtility.getCookieDetails().UserRoleId; MembersList = from c in manageMembersListViewModel.ManageMembersList select new { Name = c.Name, Email = c.Email, UserName = c.UserName, Password = (UserRoleId == 2 || UserRoleId == 1) ? c.Password : "******", Id = Convert.ToString(c.Id).Encrypt(), IsMember = (c.RoleId == (int)UserRole.Member).ToString(), RoleName = c.RoleName, Status = c.Status }; return Json(new { sEcho = param.sEcho, iTotalRecords = manageMembersListViewModel.noOfRecords, iTotalDisplayRecords = manageMembersListViewModel.noOfRecords, aaData = MembersList }, JsonRequestBehavior.AllowGet); } catch { throw; } } ---------------jquery code----------------------------- function LoadMembersGrid(tableID, parameters) { $('#' + tableID).DataTable().clear().destroy(); var parameter = ''; if (parameters != '') { parameter = JSON.stringify(parameters); } var IsArchived = false; IsArchived = $('#chkShowArchive').is(":checked"); var IsDeleted = false; IsDeleted = $('#chkShowDelete').is(":checked"); $('#' + tableID).dataTable( { "bServerSide": true, "sAjaxSource": BaseUrl() + "Admin/Members/GetManageMembersGrid", "fnServerParams": function (aoData) { aoData.push({ "name": "filter", "value": parameter }, { "name": "IsArchived", "value": IsArchived }, { "name": "IsDeleted", "value": IsDeleted }); perm = aoData; }, "pagingType": "simple_numbers", "order": [[1, "ASC"]], "paging": true, "searching": true, "lengthMenu": [10, 25, 50, 75, 100], "iDisplayLength": 100, "fnDrawCallback": function (e) { }, "columns": [ { "data": "Name", "bSearchable": true, "bSortable": true, "sName": "Name", "width": "15%" }, { "data": "Email", "bSearchable": true, "bSortable": true, "sName": "Email", "width": "20%" }, { "data": "UserName", "bSearchable": true, "bSortable": true, "sName": "UserName", "width": "20%" }, { "data": "Password", "bSearchable": true, "bSortable": true, "sName": "Password", "width": "15%" }, { "data": "RoleName", "bSearchable": true, "bSortable": true, "sName": "RoleName", "width": "15%" }, { "data": "Action", "bSearchable": false, "bSortable": false, "sName": "Action", "width": "30%" } ], oLanguage: { sEmptyTable: "No Records Found." }, columnDefs: [ { targets: 5, render: function (data, type, row) { var viewLink = ' '; var editLink = ' '; var editEmailLink = ' '; var archiveLink = ''; if (row.Status == UserStatusEnum.Disabled) { archiveLink = ' '; } else if (row.Status == UserStatusEnum.Deleted) { archiveLink = ''; } else { archiveLink = ' '; } var loginTrackLink = ' '; var subscriptionLink = ""; if (row.IsMember == "True") { subscriptionLink = ' '; } var deleteLink = ''; if (row.Status == UserStatusEnum.Deleted) { deleteLink = ' '; } else { deleteLink = ' '; } var ExcelLink = ' '; return viewLink + editLink + editEmailLink + archiveLink + loginTrackLink + subscriptionLink + deleteLink + ExcelLink; } }, ], "initComplete": function (settings, json) { $('[data-toggle="tooltip"]').tooltip();FirefoxTooltip(); }, processing: false, "createdRow": function (row, data, dataIndex) { }, "fnDrawCallback": function () { $('[data-toggle="tooltip"]').tooltip();FirefoxTooltip(); } }); }