jQuery Datatables with Twitter Bootstrap Shows Differently on Heroku

yellowreign

I have a Rails 3.1 app running on Heroku where I'm using Bootstrap v1.4 with jQuery (I need to stay with Bootstrap 1 - so I can't move to version 2) datatables. While the datatables appear fine locally, when I move it the changes to Heroku, it doesn't work.

In particular, it does not show the text for how many rows there are and it doesn't put a line break/spacing after the pagination. Also, the table sorts data correctly, but the pagination doesn't work (it doesn't show page numbers and Next/Previous links don't do anything).

Locally, the bottom of a datatable looks like this - http://bit.ly/Mof6Ia

However, on Heroku it looks like this: http://bit.ly/P3FZ6Q

I implemented the code on the Datatables blog (http://www.datatables.net/blog/Twitter_Bootstrap).

Also, I ran the debugger: http://debug.datatables.net/uxadux

Any help would be greatly appreciated, thanks!

[code]
my html:








jQuery.noConflict();
/* Table initialisation */
jQuery(document).ready(function() {
jQuery('#datatable').dataTable( {
sDom: "<'row'<'span5'l><'span8'f>r>t<'row'<'span4'i><'span8'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
} );








Date
id
User Name




<%= user.date.strftime("%m/%d/%Y") %>
<%= user.id %>
<%= user.user_name %>






dataTables_bootstrap_plugin.js:

/* Default class modification */

jQuery.extend( jQuery.fn.dataTableExt.oStdClasses, {
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header"
} );

/* API method to get paging information */
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
}

/* Bootstrap style pagination control */
jQuery.extend( $.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function( oSettings, nPaging, fnDraw ) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function ( e ) {
e.preventDefault();
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
fnDraw( oSettings );
}
};

jQuery(nPaging).addClass('pagination').append(
''+
'← '+oLang.sPrevious+''+
''+oLang.sNext+' → '+
''
);
var els = jQuery('a', nPaging);
jQuery(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
jQuery(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
},

"fnUpdate": function ( oSettings, fnDraw ) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

if ( oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
}
else if ( oPaging.iPage <= iHalf ) {
iStart = 1;
iEnd = iListLength;
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}

for ( i=0, iLen=an.length ; i