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

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

  • allanallan Posts: 23,212Questions: 0Answers: 619
    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
  • sunasrasunasra Posts: 6Questions: 0Answers: 0
    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
  • allanallan Posts: 23,212Questions: 0Answers: 619
    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
  • sunasrasunasra Posts: 6Questions: 0Answers: 0
    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 :)
  • allanallan Posts: 23,212Questions: 0Answers: 619
    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
  • sunasrasunasra Posts: 6Questions: 0Answers: 0
    Thanks Allan
    I solved it by aoColumn:)
  • acnuacnu Posts: 3Questions: 0Answers: 0
    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
  • allanallan Posts: 23,212Questions: 0Answers: 619
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    edited May 2012
    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
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    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" } ] }); }
  • allanallan Posts: 23,212Questions: 0Answers: 619
    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
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    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
  • allanallan Posts: 23,212Questions: 0Answers: 619
    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
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    edited May 2012
    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
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    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
  • allanallan Posts: 23,212Questions: 0Answers: 619
    Hi - great to hear you for it working :-).

    Allan
  • ghudeihedghudeihed Posts: 21Questions: 0Answers: 0
    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.