I am working on datatable and facing this error :
DataTables warning: table id=table - Requested unknown parameter '0'
for row 0, column 0.
I have studied this link and it says that my table column defines in HTML doesn't match with the columns received from server. BUT in my case both are same.
Here is my HTML code :
<table id="table" class="display responsive nowrap" cellspacing="0" width="100%">
<thead style="background-color:#303641;">
<tr>
<th>aNumber</th>
<th>bNumber</th>
<th>cellID</th>
<th>dateTime</th>
<th>duration</th>
<th>imei</th>
<th>imsi</th>
<th>operatorId</th>
<th>mscId</th>
<th>fileId</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Datatable javascript code :
var dataTable = $('#table').DataTable({
"processing": true,
"serverSide": true,
"bFilter": false,
"iDisplayLength": configData,
dom: 'Bfrtip',
buttons: ['colvis', 'print', 'csv', 'excel', 'pdf'],
searching: false,
language: {
buttons: {
colvis: 'Show/Hide Columns'
}
},
"ajax": {
url: "getAdvanceCallAnalysisData.json",
data: function(d) {
return $.extend({}, d, {
"offset": 0,
"newRequest": newReq,
"totalRecords": total,
"lookInCol": "aNumber",
"lookInVal": "43543543",
"fromDate": from_date,
"toDate": to_date,
"callingCellId": "",
"CalledCellId": "",
"cdrType": "",
"smsType": "",
"durationFilter": "",
"selectColumns": "",
"sortCol": "",
"sortType": "",
});
},
type: "POST",
error: function() {
alert("error");
},
complete: function(data) {
total = data.responseJSON.recordsTotal;
newReq = 0;
test(total, newReq);
$("#loading_image").hide();
$(".show_datatable").show();
},
"aoColumns": [{
"mData": "aNumber"
}, {
"mData": "bNumber"
}, {
"mData": "cellID"
}, {
"mData": "dateTime"
}, {
"mData": "duration"
}, {
"mData": "imei"
}, {
"mData": "imsi"
}, {
"mData": "operatorId"
}, {
"mData": "mscId"
}, {
"mData": "fileId"
}]
}
});
you can see that my columns name and numbers match with the columns define in ajax response.
I have done same thing for another table and it was working fine but it shows error here. don't know why !!
json response : (It returns 15 records, I posted only two just to make it short)
{"msg":null,"code":null,"status":null,"data":[{"aNumber":"343","bNumber":"3434","cellID":"410-01-831-14770","dateTime":"2017-08-23 17:27:54.0","duration":419,"imei":"22380831696837","imsi":"35340311428389","operatorId":4,"mscId":"5","fileId":"4"},{"aNumber":"3434","bNumber":"5656","cellID":"410-07-1314-28271","dateTime":"2017-08-23 22:02:15.0","duration":785,"imei":"49776303943255","imsi":"35722667519554","operatorId":1,"mscId":"2","fileId":"5"}],"draw":1,"limit":1000,"recordsFiltered":12,"recordsTotal":12}
The most funny part is it shows the correct records and pagination even it display correct rows (with empty data) in datatable. This ajax call returns 15 records. Please see the image below :
Any idea, what is wrong here ?
Related
I am facing an issue with Datatable .
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th>${column.columnTitle}</th>
</c:forEach>
</tr>
</thead>
<tfoot>
<tr>
<c:forEach items="${Details.columns}" var="column">
<th></th>
</c:forEach>
</tr>
</tfoot>
<tbody>
<c:forEach items="${Details.callList}" var="call">
<tr>
<c:forEach items="${call.attributes}" var="attribute">
<td>${attribute.value}</td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>
$("#example1").dataTable({
'sDom': '"top"i',
//"aoColumnDefs": [{ "bSearchable": true, "aTargets": [1] }],
"bPaginate" : true,
"bLengthChange" : false,
//"bFilter" : true,
"bSearchable": true,
"bSort" : true,
"bInfo" : true,
"bAutoWidth" : false,
"iDisplayLength": 5
//}).columnFilter({"aoColumns": [{ "type": "text" }, { "type": "text" }, null]});
}).columnFilter({"aoColumnDefs": [{ "bSearchable": true, "aTargets": [2] }]});
From the above snippet.. i am trying to remove the filter/search for last column alone.
Here "aoColumns" works as expected - It removes the filter in last column as i coded,
However i am unable to use "aoColumns" . Since the columns in this table is dynamic/configurable, so it is tough for me to change the code everytime.
It would be really grateful if anyone can help me here..
Thanks,
This is how I use Datatables and it works like a charm. I don't do sorting at client-side, I do it at server-side using AJAX, but the configuration for the table should be the same except for "bServerSide=true". Let me know if this solves your problem:
var oTable = $('#tblMainTable').dataTable({
"searching": false,
"bStateSave": true,
"fnStateSave": function (oSettings, oData) {
localStorage.setItem('jobTitlesDataTables', JSON.stringify(oData));
},
"fnStateLoad": function (oSettings) {
return JSON.parse(localStorage.getItem('jobTitlesDataTables'));
},
"pagingType": "full_numbers",
"bLengthChange": false,
"bAutoWidth": false,
"iDisplayLength": 2000,
"bServerSide": true, // server side
"sAjaxSource": BASE_URL + "Job/GetJobTitleMappingDTOs", // AJAX URL
"bProcessing": true,
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
// send data from client-side to server-side
aoData.push({ "name": "IsMapped", "value": $("#bdgIsMapped").data("selected") });
aoData.push({ "name": "IsSearchableOption", "value": $("#bdgIsSearchable").data("selected") });
aoData.push({ "name": "timestamp", "value": new Date().getTime() }); // Added to avoid caching in some IE versions.
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"cache": false,
"success": function (json) {
// shows records count next to the top title
if (json.iTotalRecords > 0) {
$("#resultsDescription").text(" - " + json.iTotalRecords + " rows.");
}
else {
$("#resultsDescription").text(" - No results.");
}
// shows paginator when necessary
if (json.iTotalRecords > json.iDisplayLength) {
$(".dataTables_paginate").show();
}
else {
$(".dataTables_paginate").hide();
}
$("#isFirstSearch").val("false");
fnCallback(json);
}
});
},
"aoColumnDefs": [
{
sType: "numeric",
mData: "RowNumber",
aTargets: [0],
mRender: function (data, type, full) {
// this is for custom rendering a column just in case you need it
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="RowNumber">' + full.RowNumber + '</span>';
}
},
{
sType: "numeric",
mData: "JobTitleId",
aTargets: [1],
mRender: function (data, type, full) {
// 'full' is the row's data object, and 'data' is this column's data
return '<span class="EditableJobTitleId" data-job-title-id="' + full.JobTitleId + '">' + full.JobTitleId + '</span>';
}
},
{
sType: "string",
mData: "JobTitle",
aTargets: [2]
}
],
"order": [[1, "asc"]]
});
I am trying to build my DataTable (1.10.5) using an ajax call to a service - http://www.datatables.net/examples/ajax/
Here is my Javascript:
$('#tableexample').DataTable({
"dom": 'C<"clear">lfrtip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../api/EventTypes/GetAll",
"aoColumnDefs": [
{
"aTargets": [0],
"mData": "Id"
},
{
"aTargets": [1],
"mData": "Name"
},
{
"aTargets": [2],
"mData": "Name"
},
{
"aTargets": [3],
"mData": "Name"
},
{
"aTargets": [4],
"mData": "Name"
}
]
});
Here is my HTML:
<table id="tableexample" class="table table-striped dataTable table-hover">
<thead>
<tr>
<th>Select</th>
<th>Event</th>
<th>Primary Category</th>
<th>Secondary Category</th>
<th>Workflow</th>
</tr>
</thead>
</table>
Here is my error:
Uncaught TypeError: Cannot read property 'length' of undefined
If I look i my jquery.dataTables.js - it says that my data is undefined...
var data = _fnAjaxDataSrc( settings, json );
Can anyone help me out with setting up my ajax call properly to dynamically build my table??
Thanks!
Finally found it!
I needed to make an ajax call and pass the data to "aaData":
$.ajax({
url: '/Portal/api/EventTypes/GetEventWorkflowDefinitions',
type: 'GET',
dataType: 'json',
success: function (data) {
assignToEventsColumns(data);
}
});
function assignToEventsColumns(data) {
var table = $('#tableexample').dataTable({
"dom": 'C<"clear">lfrtip',
"bAutoWidth": false,
"aaData": data,
"aaSorting": [],
"aoColumnDefs": [
{
"aTargets": [0],
"bSearchable": false,
"bSortable": false,
"bSort": false,
"mData": "EventTypeId",
"mRender": function (event) {
return '<input class="childCheck" type="checkbox" id="childCheckBoxes" value="' + event + '">';
}
},
{
"aTargets": [1],
"mData": "EventType"
}
Once I did this...the table build perfectly!
I want to create a datatable wherein my first column values come from an array and second and other columns contains custom html ( select boxes, inputs etc).I have used datatable before but that time i was reading data from json ( for all columns ) like this:
function basketTable(data){
topTable = $('#at-top-100').dataTable({
//layout of data table
"dom": 'Tlfrtip',
"bInfo" : false,
"bDestroy":true,
"bFilter" : false,
"responsive":true,
"aaData" : data,
"aoColumns": [
{ "mData": "Ap" },
{ "mData": "Dp" },
{ "mData": "A"},
{ "mData": "S"},
{ "mData": "S"},
],
"iDisplayLength": 10,
"oLanguage": {
"sSearch": "",
"sSearchPlaceholder" : "Search..",
"sLengthMenu": " _MENU_ ",
}
});
}
Any insight on how i can achieve this. Any help would be greatly appreciated!!
Use the "mrender" function and place any html you want to render per cell in the function.
You can also access the properties of the object in the row if you want to use them in your display.
http://legacy.datatables.net/usage/columns
function basketTable(data){
topTable = $('#at-top-100').dataTable({
//layout of data table
"dom": 'Tlfrtip',
"bInfo" : false,
"bDestroy":true,
"bFilter" : false,
"responsive":true,
"aaData" : data,
"aoColumns": [
{ "mData": "Ap" },
{ "mData": "Dp" },
{ "mData": "A"},
{ "mData": "S"},
{ "mData": "S",
"mRender": function(data,type,full)
{
return '<input type="text" value="Scanners and Scales"/>'
}
],
"iDisplayLength": 10,
"oLanguage": {
"sSearch": "",
"sSearchPlaceholder" : "Search..",
"sLengthMenu": " _MENU_ ",
}
});
}
Hi i have successfully implemented jquery data table server side call,but i am unable to load data in html view
it just says processing
here is my Js code
$('#internetTable').dataTable({
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': 'api/values/GetInternetSales'
"aoColumns": [
{ "mData": "Calls" },
{ "mData": "LevelOneOperators" },
{ "mData": "LevelTwoOperators" },
{ "mData": "Issueraised" },
{ "mData": "SalesDate" },
{ "mData": "AutomaticResponses" }
]
});
and this is html code
<table id="internetTable" class="table table-bordered table-hover">
<thead>
<tr>
<th >Date</th>
<th>Issue Raised</th>
<th>Level One Operators</th>
<th >Level Two Operators</th>
<th>Automatic Responses</th>
<th>Calls</th>
</tr>
</thead>
</table>
And the response am getting from server is
{"sEcho":"2","iTotalRecords":10,"iDisplayStart":1,"iDisplayEnd":1,"iDisplayLength":10,"iTotalDisplayRecords":100,"InternetDataList":[{"Calls":"320","LevelOneOperators":"1","LevelTwoOperators":"7","Issueraised":"1","SalesDate":"2010-11-25T00:00:00","AutomaticResponses":235}]}
Now,just want to ask that what modifications in JS code do i need to do to parse it in table,as i have searched alot but could'nt get any solution.
Got the answer i need to add following code in js:
$('#internetTable').dataTable({
'bProcessing': true,
'bServerSide': true,
"sServerMethod": "GET",
// to enable Pagination
"sPaginationType": "full_numbers",
'sAjaxSource': 'api/values/GetInternetSales',
"sAjaxDataProp": "InternetDataList",
"aoColumnDefs": [{
"mData": "InternetDataList"
}],
"aoColumns": [
{ "mData": "Calls" },
{ "mData": "LevelOneOperators" },
{ "mData": "LevelTwoOperators" },
{ "mData": "Issueraised" },
{ "mData": "AutomaticResponses" },
{ "mData": "SalesDate" }
]
});
As,here the sAjaxDataProp is your data name as in my case it is InternetDataList and default it is aadata
Below is the document ready function
Script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetUser.ashx",
"sServerMethod": "POST",
"sAjaxDataProp" : "",
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": "download_link",
"mRender": function ( data, type, full ) {
return 'Detail';
}
} ],
"aoColumns": [
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
});
Below is the respond from server (GetUser.ashx)
[
{
"UserId": "1",
"LoginId": "white.smith",
"Activated": "Y",
"Name": "Test Account",
"LastName": "Liu",
"Email": "white.smith#logical.com",
"CreatedDate": "1/21/2014 12:03:00 PM",
"EntityState": "2",
"EntityKey": "System.Data.EntityKey"
},
More Data...
]
Below is the html table where the data should be put
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="15%">User Detail</th>
<th width="15%">LoginID</th>
<th width="15%">Name</th>
<th width="15%">Created Date</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th width="15%">User Detail</th>
<th width="15%">LoginID</th>
<th width="15%">Name</th>
<th width="15%">Created Date</th>
</tr>
</tfoot>
</table>
Expected result:
But I came across a problem:
While the page is loading, there was an uncaught exception from the browser:
Cannot read property 'length' of undefined
When I further check, it came from line 2037 of jquery.dataTables.js
var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json );
I checked that the json was valid, but the "aData" was null, why this happen?
Your "sAjaxDataProp" : "" is set to an empty string, which causes this error.
dataTables expects to have a string here to tell under which key your server returned data can be found.
This defaults to aaData, so your json should include this key amongst all others that might be returned or needed by pagination etc.
Normal serversided json:
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"aaData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek#test.com",
"1",
""
],...
Since all values are in aaData you don't need sAjaxDataProp at all.
Modified serverside json:
{
"iTotalRecords":"6",
"iTotalDisplayRecords":"6",
"myData": [
[
"1",
"sameek",
"sam",
"sam",
"sameek#test.com",
"1",
""
],
Now the values are in myData. so you need to tell dataTables where to find the actual data by setting:
"sAjaxDataProp" : "myData"
Here is a Plunker
As there are 4 columns, add the following in "aoColumns":
"aoColumns": [
{ "mData": null }, // for User Detail
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
For undefined length, I have tried the following code and it's working:
$('#example').dataTable({
"aLengthMenu": [[100, 200, 300], [100, 200, 300]],
"iDisplayLength": 100,
"iDisplayStart" : 0,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "GetUser.ashx",
"sServerMethod": "POST",
"sAjaxDataProp" : "",
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"mData": "download_link",
"mRender": function ( data, type, full ) {
return 'Detail';
}
} ],
"aoColumns": [
{ "mData": null },
{ "mData": "LoginId" },
{ "mData": "Name" },
{ "mData": "CreatedDate" }
]
});
The reference site to know more about aLengthMenu is:
https://legacy.datatables.net/ref#aLengthMenu
If you see this error, look at the json returned from the server, and then make sure that all of your datatable 'mData' values have matching entry. If you are also using a bean, check there as well.
And there is no need specify 'tr', 'td', etc for the table. It is much cleaner if you let jquery do that for you. Here is what my tables look like:
<table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable" style="table-layout:fixed" ></table>
and then my datatable elements specify the width and column title:
{sTitle: "Column A", sWidth: "100px", mData: "idStringFromJson", bSortable: false},
Use $('#example').DataTable({.. (capital D) instead of $('#example').dataTable({..
When I ran into this problem, it was actually the result of an un-applied migration. I had restored a backup of the database, which hadn't yet had one of my recent schema migrations run on it, and once I ran migrations, everything worked fine.