JSON and hidden row details

JSON and hidden row details

s-kAns-kAn Posts: 9Questions: 0Answers: 0
edited August 2010 in General
Hi, Allan and all!)
Allan and all all all - please help to deal with a problem, really want to combine the two now these beautiful instrument, namely -
Ajax source - a server-side file, with JSON formatting (http://datatables.net/examples/data_sources/ajax.html) and DataTables hidden row details example( http://datatables.net/examples/api/row_details.html)

Can this tknite nose where to look and what to fix everything to work ... Thanks in advance - will be happy to answer any.

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    What have you got so far? Can you link us to it?

    Allan
  • s-kAns-kAn Posts: 9Questions: 0Answers: 0
    Hi, Allan and sorry...I'll try to explain more in detail
    I want all the information stored in JSON, and the table turned to the file that I have and done. Then I want to go to the same table to realize "DataTables hidden row details", but does not work, gives to first error - "DataTables warning: Added data does not match known number of columns" And firebug issue here is
    [code]
    nTds[i] is undefined
    http://localhost/GameGuide/js/jquery.dataTables.js
    Line 4455
    if ( nTds[i].className.indexOf(sClass+"1") != -1 )
    [/code]

    Here is my code associated with DataTables hidden row details

    [code]
    $(document).ready(function() {
    var nCloneTh = document.createElement( 'th' );
    var nCloneTd = document.createElement( 'td' );
    nCloneTd.innerHTML = '';
    nCloneTd.className = "center";

    $('.display thead tr').each( function () {
    this.insertBefore( nCloneTh, this.childNodes[0] );
    } );

    $('.display tbody tr').each( function () {
    this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
    } );
    var oTable = $('.display').dataTable( {
    "bJQueryUI": true,
    "aoColumnDefs": [
    { "bSortable": false, "aTargets": [ 0 ] },

    ],
    "aaSorting": [[1, 'asc']]
    });
    $('td img', oTable.fnGetNodes() ).each( function () {
    $(this).click( function () {
    var nTr = this.parentNode.parentNode;
    if ( this.src.match('import') )
    {
    /* This row is already open - close it */
    this.src = "img/bluevelvet/details_plusik.png";
    oTable.fnClose( nTr );
    }
    else
    {
    /* Open this row */
    this.src = "img/bluevelvet/details_import.png";
    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
    } );
    } );
    } );
    [/code]

    As soon as I connect the json-file

    [code]
    "bProcessing": true,
    "sAjaxSource": "json/json_source.json"
    [/code]

    individually, it works very well, but when I combine these two things, you give the above error ...
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    As the error indicates, DataTables needs the data arrays length (the row arrays) to exactly match the number of columns in the table. If this doesn't happen - this error is given. So I would guess you just need to add an extra column, and make it hidden using bVisible.

    Allan
  • s-kAns-kAn Posts: 9Questions: 0Answers: 0
    Added an additional column, made it invisible, and still get this error - "DataTables warning: Added data does not match known number of columns"

    What else can I try
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    How many entries do you have in your data array (the inner arrays)? Make the number of columns in the table exactly match that.

    Allan
  • s-kAns-kAn Posts: 9Questions: 0Answers: 0
    Good morning, Allan!)
    All that you suggest - I understand all this, and all that I have long tried to do, and the result of one - error, error, and again a error.
    I have a counter offer - could you try to combine these two things mentioned above, ie json and DataTables hidden row details, unless of course you will have free time to do so. Previously'll be very grateful - I will be glad to answer any.
This discussion has been closed.