DataTables warning (table id = 'survey_list'): Requested unknown parameter '0' from the data source
DataTables warning (table id = 'survey_list'): Requested unknown parameter '0' from the data source
sunasra
Posts: 6Questions: 0Answers: 0
On using aoColumnDefs I am getting DataTables warning (table id = 'survey_list'): Requested unknown parameter '0' from the data source
Even its not fetching all the rows
Here is code
[code]
$(document).ready(function() {
var oTable = $('#survey_list').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Target_URL",
"sAjaxDataProp": "aaData",
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return oObj.aData;
},
"bUseRendered": false, "aTargets": [ 0 ]
},
]
} );
} );
// remove the event listeners when the dialog is hidden
$("#dialog-form").bind("hide", function() {
// remove event listeners on the buttons
$("#dialog-form a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#dialog-form").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : false // this parameter ensures the modal is shown immediately
});
});
×
Enter Survey Name
Name
Close Save
changes
Survey Panel
Add Survey
Total Survey
id_survey
company_id
name
stime
status
1
New UI
Action
  Active
  Edit
  Delete
[/code]
Target URL Data
[code]
{"aaData":[{"id_survey":"1","company_id":"39","name":"p","stime":"2012-03-05 17:06:13.0","status":"1"},{"id_survey":"11","company_id":"39","name":"Saffroze","stime":"2012-03-22 15:50:36.0","status":"1"},{"id_survey":"12","company_id":"39","name":"name","stime":"2012-03-28 11:57:13.0","status":"1"},{"id_survey":"13","company_id":"39","name":"Saffroze","stime":"2012-03-28 11:58:11.0","status":"1"},{"id_survey":"16","company_id":"39","name":"hrll","stime":"2012-03-28 12:03:32.0","status":"1"},{"id_survey":"17","company_id":"39","name":"hrll","stime":"2012-03-28 12:04:16.0","status":"1"},{"id_survey":"18","company_id":"39","name":"hrll","stime":"2012-03-28 12:04:23.0","status":"1"},{"id_survey":"19","company_id":"39","name":"eded","stime":"2012-03-28 12:12:07.0","status":"1"},{"id_survey":"20","company_id":"39","name":"Okay","stime":"2012-03-28 12:14:58.0","status":"1"},{"id_survey":"21","company_id":"39","name":"OKay","stime":"2012-03-28 12:15:25.0","status":"1"},{"id_survey":"22","company_id":"39","name":"Yes","stime":"2012-03-28 12:38:02.0","status":"1"},{"id_survey":"23","company_id":"39","name":"Cook","stime":"2012-03-28 12:46:08.0","status":"1"},{"id_survey":"24","company_id":"39","name":"Cook","stime":"2012-03-28 12:46:35.0","status":"1"},{"id_survey":"25","company_id":"39","name":"hhhh","stime":"2012-03-28 12:46:43.0","status":"1"},{"id_survey":"26","company_id":"39","name":"Jjj","stime":"2012-03-28 12:51:04.0","status":"1"},{"id_survey":"27","company_id":"39","name":"H","stime":"2012-03-28 13:01:54.0","status":"1"}]}
[/code]
One more Qs
Which one is better to use aoColumnDefs or aoColumn?
Thanks
Manzur
Even its not fetching all the rows
Here is code
[code]
$(document).ready(function() {
var oTable = $('#survey_list').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Target_URL",
"sAjaxDataProp": "aaData",
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return oObj.aData;
},
"bUseRendered": false, "aTargets": [ 0 ]
},
]
} );
} );
// remove the event listeners when the dialog is hidden
$("#dialog-form").bind("hide", function() {
// remove event listeners on the buttons
$("#dialog-form a.btn").unbind();
});
// finally, wire up the actual modal functionality and show the dialog
$("#dialog-form").modal({
"backdrop" : "static",
"keyboard" : true,
"show" : false // this parameter ensures the modal is shown immediately
});
});
×
Enter Survey Name
Name
Close Save
changes
Survey Panel
Add Survey
Total Survey
id_survey
company_id
name
stime
status
1
New UI
Action
  Active
  Edit
  Delete
[/code]
Target URL Data
[code]
{"aaData":[{"id_survey":"1","company_id":"39","name":"p","stime":"2012-03-05 17:06:13.0","status":"1"},{"id_survey":"11","company_id":"39","name":"Saffroze","stime":"2012-03-22 15:50:36.0","status":"1"},{"id_survey":"12","company_id":"39","name":"name","stime":"2012-03-28 11:57:13.0","status":"1"},{"id_survey":"13","company_id":"39","name":"Saffroze","stime":"2012-03-28 11:58:11.0","status":"1"},{"id_survey":"16","company_id":"39","name":"hrll","stime":"2012-03-28 12:03:32.0","status":"1"},{"id_survey":"17","company_id":"39","name":"hrll","stime":"2012-03-28 12:04:16.0","status":"1"},{"id_survey":"18","company_id":"39","name":"hrll","stime":"2012-03-28 12:04:23.0","status":"1"},{"id_survey":"19","company_id":"39","name":"eded","stime":"2012-03-28 12:12:07.0","status":"1"},{"id_survey":"20","company_id":"39","name":"Okay","stime":"2012-03-28 12:14:58.0","status":"1"},{"id_survey":"21","company_id":"39","name":"OKay","stime":"2012-03-28 12:15:25.0","status":"1"},{"id_survey":"22","company_id":"39","name":"Yes","stime":"2012-03-28 12:38:02.0","status":"1"},{"id_survey":"23","company_id":"39","name":"Cook","stime":"2012-03-28 12:46:08.0","status":"1"},{"id_survey":"24","company_id":"39","name":"Cook","stime":"2012-03-28 12:46:35.0","status":"1"},{"id_survey":"25","company_id":"39","name":"hhhh","stime":"2012-03-28 12:46:43.0","status":"1"},{"id_survey":"26","company_id":"39","name":"Jjj","stime":"2012-03-28 12:51:04.0","status":"1"},{"id_survey":"27","company_id":"39","name":"H","stime":"2012-03-28 13:01:54.0","status":"1"}]}
[/code]
One more Qs
Which one is better to use aoColumnDefs or aoColumn?
Thanks
Manzur
This discussion has been closed.
Replies
You have 5 column headers, but 4 columns in the body - that's the problem.
> Which one is better to use aoColumnDefs or aoColumn?
Each has its place, If you know the exact number of columns aoColumns, otherwise aoColumnDefs.
Allan
Columns in the body ? if it means table body like above code
[code]
1
New UI
Action
  Active
  Edit
  Delete
[/code]
i replaced with
[code]
1
1
Hi
2/10/2012
1
[/code]
But Still getting same problem
if it means body of json data. that also contain 5 columns
Can you please tell me where i am doing mistake. Sorry I am new to datatable
Thanks For Reply
Yes - the example you posted just below that comment only had 4 columns.
Odd that it doesn't work with your second code block though. Can you link me to that page please?
Allan
Thanks For your reply
Please find the link below
http://datatable.saffroze.com/mobi/survey_panel.php
I want to inlcude hyperlink(which takes value from last column) in last column . Can you suggest me tutorial how to do that by columnDefs?
I appreciate your help :)
Allan
I solved it by aoColumn:)
I am new to datatables. I am getting data from SpringMVC controller. The problem is Datatable data not displaying but in the footer is displaying "Showing 1 to 10 of 10 entries" message also footer message changed correctly when I changed not next page.
Also it displaying Datatables warning(tableid='companies'): Requested unknown parameter '0' from the datasource for row 0
The JSON
iTotalDisplayRecords
10
iTotalRecords
10
sEcho
1
rows
[Object { name="product-1", id=1, description="product-1-description"}, Object { name="product-2", id=2, description="product-2-description"}, Object { name="product-3", id=3, description="product-3-description"}, 7 more...]
Script
$(document).ready(function () {
$("#companies").dataTable({
"bServerSide": true,
"url":'/products',
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"sAjaxDataProp": "rows"
});
});
id
Name
Description
Loading data from server
much appreciated your help
Regards
acnu
Allan
I am now wondering how to use mDataProp with the Editor plug=-in, I cant get that right. I have several questions and all start from this error [DataTables warning (table id = 'x'): Requested unknown ]. I am trying to build editable DataTable using the Editor plugin.
1- if mDataProp is a function how it is possible to be a string at the same time may be this does not make sense but I am really really want to understand it and get it correctly I have an example of what I am doing here:
[code]
"aoColumnDefs": [
{
"mDataProp": "manuf_pn",
"fnRender": function (o, val) { return o.aData[0]; },
"aTargets": [0]
}
]
[/code]
[code]
"aoColumnDefs": [
{
"mDataProp": function (source, type, val) { return source[0];},
"fnRender": function (o, val) { return o.aData[0]; },
"aTargets": [0]
}
]
[/code]
so how to use and when to use each one?
2- I constructed the Editor form using the following
[code]
"fields": [
{
"label": "Part Number:",
"name": "manuf_pn",
"dataProp": "manuf_pn"
}
]
[/code]
When I use the first code I mean this "mDataProp": "manuf_pn", I will get the error [DataTables warning...] BUT the editing form will be filled with the values that represent the table row that been selected which great. but when I use mDataProp as a function I will no longer get and error but the editing form fields will be filled with undefined
I hope that you can help me getting this right
[code]
{
"d": {
"sEcho": 1,
"iTotalRecords": 2,
"iTotalDisplayRecords": 2,
"aaData": [
[
"kk145",
"sState13",
"sPriority13",
"13" // Hidden ID
],
[
"nnn145",
"sState420",
"sPriority420",
"420"
]
]
}
}[/code]
This is the code that I am using
[code]
This is the code that I am using
[code]
function DataTableInitPartsUser() {
oTable = $('#PartsUserTable').dataTable({
"bFilter": false, // TODO: set-up search textbox
"bJQueryUI": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"aaSorting": [[0, "asc"]],
"sAjaxSource": "CustomWebService.asmx/GetPartsUserDataTable",
"oLanguage": {
"sInfo": "Showing _START_ to _END_ of _TOTAL_ parts",
"sProcessing": "Please wait...",
"sEmptyTable": "No part selected",
"sInfoEmpty": "Showing 0 to 0 of 0 parts"
},
"aoColumns": [
{ "sTitle": "Part Number" },
{ "sTitle": "State" },
{ "sTitle": "Priority" },
{
"sTitle": null, /* ID column */
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
{
"sTitle": "",
"sClass": "open_close",
"bSortable": false,
"bSearchable": false,
"sDefaultContent": ''
}
],
"aoColumnDefs": [
{
"mDataProp": function (source, type, val) { return source[0]; },
// "mDataProp": "manuf_pn",
"fnRender": function (o, val) {
return o.aData[0];
},
"aTargets": [0]
},
{
"mDataProp": "sState",
"fnRender": function (o, val) {
return o.aData[1];
},
"aTargets": [1]
},
{
"mDataProp": "sPriority",
"fnRender": function (o, val) {
return o.aData[2];
},
"aTargets": [2]
}
],
"fnServerData": CallFnServerDataPartsUserDataTable
});
}
function CallFnServerDataPartsUserDataTable(sSource, aoData, fnCallback) {
// Create object from aoData for WebMethod
var objData = {};
for (var i = 0; i < aoData.length; i++)
objData[aoData[i].name] = aoData[i].value;
// Get parts rows
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: sSource,
data: $.toJSON(objData),
success: function (data) {
// dataTable callback
fnCallback(data.d);
},
error: function (data) { }
});
}
function CreateEditorForm() {
// Create the form
oEditorForm = new $.fn.dataTable.Editor({
"ajaxUrl": "CustomWebService.asmx/PartsUserActionControl",
"domTable": "#PartsUserTable",
"display": "lightbox",
"fields": [
{
"label": "Part Number:",
"name": "manuf_pn",
"dataProp": "manuf_pn"
},
{
"label": "State:",
"name": "sState",
"dataProp": "sState"
},
{
"label": "Priority:",
"name": "sPriority",
"dataProp": "sPriority"
}
]
});
}
[/code]
[/code]
[code]
"mDataProp": function (source, type, val) { return source[0];}
"fnRender": function (o, val) { return o.aData[0]; }
[/code]
Two comments immediately about this:
1. The mDataProp function is incomplete - you need to handle the 'set' type for setting properties as well as getting them. See this blog post which details how to use mDataProp as a function: http://datatables.net/blog/Orthogonal_data .
2. I'd suggest not using fnRender in combination with mDataProp as a function - it can get very confusing (particularly with bUseRendered enabled, as it is by default).
Beyond that, you appear to be combining object notation (sState etc) with array notation ([0] etc) for the data source. Is that intentional?
Allan
Yessssssssss Allan, you the man :D
Ok I was not really clear on how mDataProp, dataProp and the returned JSON object works together.
my aaData object does not come back as an associated array so it looks something like this {"val0","val1","val2","val3"} so I have to use the index value instead of the property name. and that fixed my issue in the editing form by using it this way "dataProp": "0" so my new structure looks like this:
In the datatable construction code:
[code]
"aoColumnDefs":
[
{
"mDataProp": function (data, type, val) {
if (type === 'set') {
data[0] = val;
return;
}
else if (type === 'display') {
return data[0];
}
else if (type === 'filter') {
return data[0];
}
return data[0];
},
"aTargets": [0]
}
]
[/code]
In the Editor form creation code
[code]
"fields":
[
{
"label": "Part Number:",
"name": "manuf_pn",
"dataProp": "0"
}
]
[/code]
I have another question now, when I submit the form with action (edit/delete) the submission will fail
and in the in the POST data I cant capture the unique id so it will be always null
[code]
action edit
data[manuf_pn] .xrs
data[sPriority] sPriority13
data[sState] sState13
id <======This value should be the unique id
table
[/code]
so any suggestions of how to handle the id value from the hidden field and overcome the submission failing
thanks a lot
> In the datatable construction code:
Your code there looks like it can be significantly simplified :-). Just use "mDataProp": "0" in the case you show :-).
> I have another question now, when I submit the form with action (edit/delete) the submission will fail
and in the in the POST data I cant capture the unique id so it will be always null
Is that the unique ID that Editor is submitting? Do you have a unique ID on the TR elements? Can you give me a link?
Allan
I guess I figured out why it is failing, I think both of edit and delete are expecting JSON object in specific format and I am currently returning just a testing string. this is my guess for now until I try it. but the thing that is still not getting is how can I get the ID and send it with the rest of the data to my web service.
The ID is unique as I am getting it from the database, and I am saving it as a hidden column in my data table, so each row have a unique Identifier. I am running locally and so I will try to explain the situation as much as I can.
the aaData looks like this:
[code]
"aaData": [
[
"kk145",
"sState13",
"sPriority13",
"13"
],
[
"nnn145",
"sState420",
"sPriority420",
"420"
]
]
[/code]
here is my aoColumns and aoColumnDefs
[code]
"aoColumns": [
{ "sTitle": "Part Number" },
{ "sTitle": "State" },
{ "sTitle": "Priority" },
{
"sTitle": null, /* Unique ID column */
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
{
"sTitle": "",
"sClass": "open_close",
"bSortable": false,
"bSearchable": false,
"sDefaultContent": ''
}
],
"aoColumnDefs": [
{
"mDataProp": "0",
"aTargets": [0]
},
{
"mDataProp": "1",
"aTargets": [1]
},
{
"mDataProp": "2",
"aTargets": [2]
}
]
[/code]
and after I click update the POST appears in console looks like this
[code]
action edit
data[manuf_pn] .xrs
data[sPriority] sPriority13
data[sState] sState13
id <=== *** So how can I fill this item ***
table
[/code]
Thanks a lot for the help
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
}
[/code]
now I want to try to do a successful database update let us see what I will get there
Again, thanks a lot
Allan
Thank you so much for all the help, I appreciate it. you are awesome man.
I will keep in developing what I have until I get to what I want it to look like.
So I am not done yet :D
Thanks again,
GH