Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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', '--', '--', '[email protected]', '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', '--', '--', '--', '[email protected]', '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?

share|improve this question

3 Answers

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/

share|improve this answer
Hi the <span id="search"></span> kept getting stripped in the code or blockquote so I removed enough of their formatting to get it into the post. I will double check the angle brackets and data cells. thanks – ServerStorm Nov 29 '11 at 14:25

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...

share|improve this answer
Greg thanks for trying this under live tables! I did not know i could do this, but it is extremly helpful. – ServerStorm Nov 29 '11 at 19:17
Helpful, that is, in solving this. – ServerStorm Nov 29 '11 at 19:21

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

share|improve this answer
Glad to hear it worked. ;-) – Greg Pettit Nov 29 '11 at 21:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.