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

edited March 2012 in DataTables 1.9 Posts: 6
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

<script> $(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 }); }); </script> <div class="container"> <div id="dialog-form" class="modal hide fade"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Enter Survey Name</h3> </div> <div class="modal-body"> <form id=gform > <label for="name">Name</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> <input type="hidden" value=39 id="company_id" name="company_id" /> </form> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal" >Close</a> <a href="#" id="add-survey" class="btn btn-primary">Save changes</a> </div> </div> <div class="page-header"> <div class="row"> <div class="span8"> <h2>Survey Panel</h2> </div> <div class="span4"> <a data-toggle="modal" href="#dialog-form" class="btn btn-primary btn-large">Add Survey</a> </div> </div> </div> <div class="row"> <div class="span12"> <h3>Total Survey</h3> <table id="survey_list" class="table table-striped table-bordered table-condensed"> <thead> <tr> <th>id_survey</th> <th>company_id</th> <th>name</th> <th>stime</th> <th>status</th> </tr> </thead> <tr> <td>1</td> <td>New UI</td> <td><div class="btn-group"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" > Action <span class="caret"></span> </a> <ul class="dropdown-menu"> <a href="" ><i class="icon-ok"></i>&nbsp Active</a> <a href="" ><i class="icon-pencil"></i>&nbsp Edit</a> <a href="" ><i class="icon-trash"></i>&nbsp Delete</a> </ul> </div> </td> </tr> </table> </div> </div> </div>



Target URL Data

{"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"}]}
One more Qs
Which one is better to use aoColumnDefs or aoColumn?

Thanks
Manzur

Replies

  • Posts: 22,720
    Please see: http://datatables.net/faqs#unknown_parameter

    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
  • Posts: 6
    Hi
    Columns in the body ? if it means table body like above code

    <tr> <td>1</td> <td>New UI</td> <td><div class="btn-group"> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" > Action <span class="caret"></span> </a> <ul class="dropdown-menu"> <a href="" ><i class="icon-ok"></i>&nbsp Active</a> <a href="" ><i class="icon-pencil"></i>&nbsp Edit</a> <a href="" ><i class="icon-trash"></i>&nbsp Delete</a> </ul> </div> </td> </tr>

    i replaced with

    <tbody> <tr> <td>1</td> <td>1</td> <td>Hi</td> <td>2/10/2012</td> <td>1</td> </tr> </tbody>

    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
  • Posts: 22,720
    Columns in the body ? if it means table body like above code

    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
  • Posts: 6
    Hi 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 :)
  • Posts: 22,720
    To need to add "sDefaultContent": "" to your current column - it is trying to use data index 0 since you haven't specified otherwise, and since that doesn't exist you got an error. You also need to use mDataProp for the other columns - see: http://datatables.net/blog/Extended_data_source_options_with_DataTables

    Allan
  • Posts: 6
    Thanks Allan
    I solved it by aoColumn:)
  • Posts: 3
    Hi

    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"
    });
    });


    <table id="companies" class="display">
    <thead>
    <tr>
    <th>id</th>
    <th>Name</th>
    <th>Description</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td colspan="5" class="dataTables_empty">Loading data from server</td>
    </tr>
    </tbody>
    </table>

    much appreciated your help

    Regards
    acnu
  • edited May 2012 Posts: 21
    Hello 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:
    "aoColumnDefs": [ { "mDataProp": "manuf_pn", "fnRender": function (o, val) { return o.aData[0]; }, "aTargets": [0] } ]
    "aoColumnDefs": [ { "mDataProp": function (source, type, val) { return source[0];}, "fnRender": function (o, val) { return o.aData[0]; }, "aTargets": [0] } ]

    so how to use and when to use each one?

    2- I constructed the Editor form using the following
    "fields": [ { "label": "Part Number:", "name": "manuf_pn", "dataProp": "manuf_pn" } ]

    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
  • Posts: 21
    Continue to my last post, this is my JSON

    { "d": { "sEcho": 1, "iTotalRecords": 2, "iTotalDisplayRecords": 2, "aaData": [ [ "kk145", "sState13", "sPriority13", "13" // Hidden ID ], [ "nnn145", "sState420", "sPriority420", "420" ] ] } }
    This is the code that I am using

    This is the code that I am using 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": '<img src="../images/details_open.png">' } ], "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" } ] }); }
  • Posts: 22,720
    Hi,

    "mDataProp": function (source, type, val) { return source[0];} "fnRender": function (o, val) { return o.aData[0]; }
    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
  • Posts: 21
    allan said: you appear to be combining object notation (sState etc) with array notation ([0] etc)

    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:
    "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] } ]
    In the Editor form creation code
    "fields": [ { "label": "Part Number:", "name": "manuf_pn", "dataProp": "0" } ]

    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

    action edit data[manuf_pn] .xrs data[sPriority] sPriority13 data[sState] sState13 id <======This value should be the unique id table
    so any suggestions of how to handle the id value from the hidden field and overcome the submission failing

    thanks a lot
  • Posts: 22,720
    Hi,

    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
  • edited May 2012 Posts: 21
    Oh I see :D I guess that make more sense.
    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:
    "aaData": [ [ "kk145", "sState13", "sPriority13", "13" ], [ "nnn145", "sState420", "sPriority420", "420" ] ]
    here is my aoColumns and aoColumnDefs
    "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": '<img src="../images/details_open.png">' } ], "aoColumnDefs": [ { "mDataProp": "0", "aTargets": [0] }, { "mDataProp": "1", "aTargets": [1] }, { "mDataProp": "2", "aTargets": [2] } ]
    and after I click update the POST appears in console looks like this

    action edit data[manuf_pn] .xrs data[sPriority] sPriority13 data[sState] sState13 id <=== *** So how can I fill this item *** table
    Thanks a lot for the help
  • Posts: 21
    woohoo :D thanks Allan, I figuerd out how to get the Id I used fnRowCallback as following

    "fnRowCallback": function( nRow, aData, iDisplayIndex ) { var id = aData[0]; $(nRow).attr("id",id); return nRow; }

    now I want to try to do a successful database update let us see what I will get there

    Again, thanks a lot
  • Posts: 22,720
    Hi - great to hear you for it working :-).

    Allan
  • Posts: 21
    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
This discussion has been closed.