DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

DataTables v1.10.0-beta.2 ajax dynamic creation almost working but I think there's a bug somewhere..

curveddesigncurveddesign Posts: 4Questions: 0Answers: 0
edited February 2014 in DataTables 1.10
I have a dynamic DataTables example that is almost working that uses a generated HTML from ajax but I can't get the column headers to show... This generates a working table but it wont get the column names? Anyone else have this working?

Here is my code...

[code]

jQuery( document ).ready( function( $ ) {
// Code using $ as usual goes here.
$('#demo').html( '' );
$('#example').dataTable( {
"ajax": "objects-dynamic.txt",
//"dataSrc": "data",
//"aoColumns": [
// { "sTitle": "Index" },
// { "sTitle": "Name" },
// { "sTitle": "Age" },
// { "sTitle": "Image" }
//],
"columns": [
{ "data": "Index" },
{ "data": "Name" },
{ "data": "Age" },
{ "data": "Image" }
]
});
});

[/code]

[code]
{
"data":[
{
"Index": 4,
"Name": "Bob",
"Age": 7,
"Image": "None"
},
{
"Index": 2,
"Name": "Timmy",
"Age": 4,
"Image": "None"
},
{
"Index": 3,
"Name": "Heather",
"Age": 55,
"Image": ""
}
],
"columns": [
{ "data": "Index" },
{ "data": "Name" },
{ "data": "Age" },
{ "data": "Image" }
]
}
[/code]

The idea comes from the 1.9.2 version of dynamic creation here http://datatables.net/release-datatables/examples/data_sources/js_array.html

Replies

  • curveddesigncurveddesign Posts: 4Questions: 0Answers: 0
    Whoops, forgot to add the code, see below.

    [code]

    jQuery( document ).ready( function( $ ) {
    // Code using $ as usual goes here.
    $('#demo').html( '' );
    $('#example').dataTable( {
    "ajax": "objects-dynamic.txt",
    //"dataSrc": "data",
    //"aoColumns": [
    // { "sTitle": "Index" },
    // { "sTitle": "Name" },
    // { "sTitle": "Age" },
    // { "sTitle": "Image" }
    //],
    "columns": [
    { "data": "Index" },
    { "data": "Name" },
    { "data": "Age" },
    { "data": "Image" }
    ]
    });
    });





    [/code]
  • PeteBPeteB Posts: 38Questions: 0Answers: 0
    A possible solution may be to change your html to:

    $('#demo').html( 'IndexNameAgeImage
    ' );
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    You need to use the `title` option to set the title for a column: http://next.datatables.net/reference/option/columns.title .

    There is no option for DataTables to read column information from an Ajax source at this time.

    Allan
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    What @PeteB says as well :-)
  • curveddesigncurveddesign Posts: 4Questions: 0Answers: 0
    Thanks Alan, using the title option I got the dynamic table to work with the objects-dynamic.txt ajax file in my initial post! The example code is below....

    P. S. Alan, I love datatables v1.10! Feature request ;-) It would be great if the columns info could be loaded from the ajax source too along with the data!

    [code]

    jQuery( document ).ready( function( $ ) {
    // Code using $ as usual goes here.
    $('#demo').html( '' );
    $('#example').dataTable( {
    "ajax": "objects-dynamic.txt",
    "columns": [
    { "title": "Index", "data" : "Index" },
    { "title": "Name", "data": "Name" },
    { "title": "Age", "data": "Age" },
    { "title": "Image", "data": "Image" }
    ],
    });
    });





    [/code]
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Agreed. Not going to happen for 1.10.0 release, as we are well into the beta cycle already, but it would be good for 1.11...

    Allan
  • curveddesigncurveddesign Posts: 4Questions: 0Answers: 0
    edited February 2014
    Allan, it looks like loading everything dynamically, including the columns, from ajax may already be working in 1.10-beta.2!!!

    Check this out! This is so cool!

    Here is the code...

    [code]

    jQuery( document ).ready( function( $ ) {
    // Code using $ as usual goes here.
    $('#demo').html( '' );
    $.ajax( {
    "url": 'objects-dynamic.txt',
    "success": function ( json ) {
    $('#example').dataTable( json );
    },
    "dataType": "json"
    } );
    });





    [/code]

    [code]
    {
    "data":[
    {
    "Index": 4,
    "Name": "Bob",
    "Age": 7,
    "Image": "None"
    },
    {
    "Index": 2,
    "Name": "Timmy",
    "Age": 4,
    "Image": "None"
    },
    {
    "Index": 3,
    "Name": "Heather",
    "Age": 55,
    "Image": ""
    },
    {
    "Index": 5,
    "Name": "Sally",
    "Age": 22,
    "Image": "None"
    }
    ],
    "columns": [
    { "title": "Index", "data" : "Index" },
    { "title": "Name", "data": "Name" },
    { "title": "Age", "data": "Age" },
    { "title": "Image", "data": "Image" }
    ]
    }
    [/code]
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Yup - that will work very nicely! The only one thing you can't do that way is use callback functions - since that isn't valid JSON. But you can do everything else :-)

    Allan
  • big_macbig_mac Posts: 5Questions: 0Answers: 0
    edited March 2014
    I tried something similar as above


    [code]




    ColVis example - Two tables with individual controls








    function InitOverviewDataTable()
    {
    $.getJSON("./test.json", null, function( json ){
    var column_data = [];
    var column_def = [];
    var temp = [];
    var temp2 = [];
    temp2 = json.aaData;

    $.each(temp2[0], function(key, value)
    {
    temp.push({ "title": key, "data": key });
    });
    column_def = JSON.stringify(temp);
    column_data = JSON.stringify(temp2);

    console.log(column_def);
    console.log(column_data);
    console.log(temp);
    console.log(temp2);

    oTable = $("#example1").DataTable( {
    "data": [column_data],
    "columns": [column_def]
    });
    });
    }

    $(document).ready(function () {
    InitOverviewDataTable();
    });
















    [/code]

    the json file looks like:


    {
    "aaData": [
    {
    "Account City": "San Antonio",
    "Account Country": "United States",
    "Account State": "TX",
    "Activity TS": "blah"

    }, {
    "Account City": "Plymouth",
    "Account Country": "United States",
    "Account State": "MN",
    "Activity TS": "blah"
    }
    ]
    }

    I get the following:

    [{"title":"Account City","data":"Account City"},{"title":"Account Country","data":"Account Country"},{"title":"Account State","data":"Account State"},{"title":"Activity TS","data":"Activity TS"}] index.html:32
    [{"Account City":"San Antonio","Account Country":"United States","Account State":"TX","Activity TS":"blah"},{"Account City":"Plymouth","Account Country":"United States","Account State":"MN","Activity TS":"blah"}] index.html:33
    Array[4]
    index.html:34
    Array[2]
    index.html:35
    Uncaught TypeError: Cannot use 'in' operator to search for '194' in [{"title":"Account City","data":"Account City"},{"title":"Account Country","data":"Account Country"},{"title":"Account State","data":"Account State"},{"title":"Activity TS","data":"Activity TS"}]

    Any thoughts what I could be doing wrong?
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Can you run the debugger over your table, or link us to a test case please?

    Allan
  • big_macbig_mac Posts: 5Questions: 0Answers: 0
    Here is the debug output :
    http://debug.datatables.net/udohis
  • big_macbig_mac Posts: 5Questions: 0Answers: 0
    If I pass it just the javascript array the temp value for columns it doesnt error but shows :


    [object Object] as the column

    http://debug.datatables.net/oqilob


    The init values and columns values look rigght.
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    For the first debug trace it shows you are passing in:

    [code]
    {
    "data": [
    [{
    "Account City": "San Antonio",
    "Account Country": "United States",
    "Account State": "TX",
    "Activity TS": "blah"
    }, {
    "Account City": "Plymouth",
    "Account Country": "United States",
    "Account State": "MN",
    "Activity TS": "blah"
    }]
    ],
    "columns": ["[{\"title\":\"Account City\",\"data\":\"Account City\"},{\"title\":\"Account Country\",\"data\":\"Account Country\"},{\"title\":\"Account State\",\"data\":\"Account State\"},{\"title\":\"Activity TS\",\"data\":\"Activity TS\"}]"]
    }
    [/code]

    So two errors:

    1. Your `data` array is an array inside an array. You just want an array of objects.

    2. Your are padding in `columns` as an array with a single entry which itself is a string. You want to pass in an array with objects (this is fixed in your second debug trace).

    Fix those issues and I think it should start working.

    Allan
  • big_macbig_mac Posts: 5Questions: 0Answers: 0
    Ok 1 and 2 are fixed.

    I get :

    Uncaught TypeError: Cannot read property 'style' of undefined jquery.dataTables.js:3894
    _fnCalculateColumnWidths jquery.dataTables.js:3894
    _fnInitialise jquery.dataTables.js:3031
    (anonymous function) jquery.dataTables.js:6219
    n.extend.each jquery.js:2
    n.fn.n.each jquery.js:2
    DataTable jquery.dataTables.js:5764
    $.fn.DataTable jquery.dataTables.js:14040
    (anonymous function) index.html:32
    j jquery.js:2
    k.fireWith jquery.js:2
    x jquery.js:4
    b jquery.js:4

    http://debug.datatables.net/uxuhum
  • big_macbig_mac Posts: 5Questions: 0Answers: 0
    I figured it out . Had to remove the inner part of the table from:





    to:
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Yup - if you are having DataTables create the columns for you, you need to have an empty thead, or not have a thead at all. Otherwise DataTables will read the column information from the HTML. I'll make sure this is mentioned in the documentation.

    Allan
  • klinklin Posts: 3Questions: 0Answers: 0
    Today's my first day using DataTables and I've been very pleased so far. I am twisting some ajax around to fit DataTables and also needed dynamic headers, so @curveddesign's post helped tremendously ...

    http://datatables.net/forums/discussion/comment/57577#Comment_57577

    Thanks!
    Ken
  • klinklin Posts: 3Questions: 0Answers: 0
    BTW, the passage in the manual pertaining to @curveddesign's post (http://datatables.net/forums/discussion/comment/57577#Comment_57577) is here ...

    http://next.datatables.net/manual/data#Objects
    [code]
    [
    {
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
    },
    {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
    }
    ]
    [/code]
    [code]
    $('#example').DataTable( {
    data: data,
    columns: [
    { data: 'name' },
    { data: 'position' },
    { data: 'salary' },
    { data: 'office' }
    ]
    } );
    [/code]
This discussion has been closed.