jQuery DataTables as per their tutorial not loading javascript array

Question

I am trying to use jQuery Datatables to paginate a query that i get from a database. The query used involves a lot of formating and joining many queries together, so I opted to build a finished array which I am now trying to format for Datatables.

In my HXTML i have jQuery and the jQuery DataTable plugin loaded the HXTML looks like this:

<span id='search'>
</span>
<script type='text/javascript' >
$(document).ready(function() {
  $('#search').html("<table id='search_table' class='tablesorter'></table>");
  $('#search_table').dataTable( {
    'aaData': [ 
    [ 'example status 2', '1', '2011-06-15', '2011-06-15', '2011-06-15', '', 'Bill',   'Father', '1', 'Henry', 'Husband', '1', 'Hamilton Harron Funeral Home', 'Dan Thompson', 'Steve', '1', '2001-05-11', '2', '2003-11-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Onelia', 'Gamboli', 'home', '', 'Houston', 'Texas', '77019', '--', '--', '--', '--', '--', '', 'Pre-Need', 'This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  This is Note 3.  '  ]
    , [ '', '2', '2011-07-02', '2011-07-02', '2011-07-02', '', '--', '--', '--', '--', '--', '--', 'Floral Haven Funeral Home ', 'Jayson Gordon', 'Henry', '3', '2003-12-02', '4', '2004-03-05', 'Non Registrant Test Program - Advantage', '--', '--', '--', 'Leona', 'Brown', 'home', '5110 Rodgewill Rd ', 'Burlington', 'Sussex', '79011', '9023219235', '--', '9026323532', '--', '--', 'h@hios.com', 'PN to AN', 'This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  This is Note 5.  '  ]
    , [ 'example1 status', '3', '2011-09-05', '2011-09-05', '2011-09-05', '', 'Onelia', 'Wife', '1', '--', '--', '--', 'First Memorial Funeral Services', 'Dan', 'Steve', '5', '2010-11-11', '7', '2011-08-19', 'Non Registrant Test Program - Dignity', '6', '2011-07-03', 'Non Registrant Test Program - Advantage', 'Henry', 'Sale', 'company', '4125 Harvester Rd. 4', 'Sussex', 'Widimer', '72212', '9025229202', '9027205202', '--', '--', '--', 'pewter@live.ca', 'At-Need', 'This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  This is Note 6.  '  ]
    ],                       
    'aoColumns': [
    {      'sTitle': 'Status'    }
    ,{      'sTitle': 'Contact ID Number'    }
    ,{      'sTitle': 'Date Entered'    }
    ,{      'sTitle': 'Date Assigned'    }
    ,{      'sTitle': 'Date Last Modified'    }
    ,{      'sTitle': 'Deceased Date'    }
    ,{      'sTitle': 'Linked To Registrant 1'    }
    ,{      'sTitle': 'Relationship 1'    }
    ,{      'sTitle': 'Authorization 1'    }
    ,{      'sTitle': 'Linked To Registrant 2'    }
    ,{      'sTitle': 'Relationship 2'    }
    ,{      'sTitle': 'Authorization 2'    }
    ,{      'sTitle': 'Location', 'sClass': 'location_cell'    }
    ,{      'sTitle': 'Sales Manager'    }
    ,{      'sTitle': 'Counselor'    }
    ,{      'sTitle': 'Registration Number'    }
    ,{      'sTitle': 'Registration Date'    }
    ,{      'sTitle': 'Program 1 Number'    }
    ,{      'sTitle': 'Program 1 Date', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'Program 1 Name', 'sClass': 'program_cell'    }    
    ,{      'sTitle': 'Program 2 Number'    }
    ,{      'sTitle': 'Program 2 Date', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'Program 2 Name', 'sClass': 'program_cell'    }
    ,{      'sTitle': 'First Name'    }
    ,{      'sTitle': 'Last Name'    }
    ,{      'sTitle': 'Address Location 1'    }
    ,{      'sTitle': 'City 1'    }
    ,{      'sTitle': 'State/Province 1'    }
    ,{      'sTitle': 'Zip/Postal Code 1'    }
    ,{      'sTitle': 'Home Phone'    }
    ,{      'sTitle': 'Work Phone'    }
    ,{      'sTitle': 'Mobile Phone'    }
    ,{      'sTitle': 'Pager'    }
    ,{      'sTitle': 'Other Phone'    }
    ,{      'sTitle': 'Sales Type'    }
    ,{      'sTitle': 'Note 1', 'sClass': 'note_cell'    }
    ]                  
  } );
} );
</script>

I am not sure why DataTables is not creating a table as this data is formatted almost exactly like the example here: Datatable Javascript array example

I would like to use DataTable for paginating this data.

Can you see why this would not be working or have I not given enough for you the go on?

Answer 1

I was able to get this working. The trick was that originally I was loading all my javascript at the bottom of my web page. While this is normally good practice, it seems that Datatables likes to be loaded at the top of the page. Maybe it is CSS conflicting so it needs to be loader prior to css applying or it could just be it needs this?

Thanks for everyone's help on this!

Regards, Steve

Answer 2

Seems to be more or less working for me. I do not think it is the initialization that is the problem, nor the array.

http://live.datatables.net/ojuhep

Would have to see a live example of where it's breaking for you in order to even begin troubleshooting beyond that, I think. See if it's CSS, conflicting JS from elsewhere...

Answer 3

Clarify the target <span id="search"></span> (you're missing some angle brackets in your code example) and clean the code a bit (you have 36 columns and 38 data points) and it should work:

http://jsfiddle.net/fvgAU/1/