0
我有一個Rails 3.1應用程序在Heroku上運行，我使用Bootstrap v1.4與jQuery（我需要留在Bootstrap 1 - 所以我不能移動到版本2 ）數據表。雖然數據表在本地顯示正常，但當我將其更改移到Heroku時，它不起作用。jQuery數據表與Twitter Bootstrap在Heroku上顯示的差異
特別是，它沒有顯示有多少行的文本，也沒有在分頁之後放置換行/間隔。此外，該表正確排序數據，但分頁不起作用（它不顯示頁碼和Next/Previous鏈接不做任何事情）。
在本地，數據表的底部看起來像like this。
但是，在Heroku上它看起來像this。
我在Datatables blog上實現了代碼。
我的佈局文件看起來像這樣的標題：
<head>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application"%>
<%= yield :javascript%>
<%= yield :script%>
<script type="text/javascript">
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"
}
});
});
</script>
</head>
<table class="bordered-table zebra-striped" id="datatable" >
<thead>
<tr>
<th>Date</th>
<th>id</th>
<th>User Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><%= user.date.strftime("%m/%d/%Y") %></td>
<td><%= user.id %></td>
<td><%= user.user_name %></td>
</tr>
</tbody>
</table>
應用CSS
/*
*= require_self
*= require bootstrap
*/
div.dataTables_length label {
width: 460px;
float: left;
text-align: left;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
width: 460px;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table {
margin: 1em 0;
clear: both;
}
table.dataTable th:active {
outline: none;
}
的application.js
//= require jquery.min
//= require jquery-ui.min
//= require jquery_ujs
//= require_self
//= require jquery.dataTables.min
//= require dataTables_bootstrap_plugin
dataTables_bootstrap_plugin.js（使用代碼來自Datatables blog）
/* 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(
'<ul>'+
'<li class="prev disabled"><a href="#">← '+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+' → </a></li>'+
'</ul>'
);
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<iLen ; i++) {
// Remove the middle elements
jQuery('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for (j=iStart ; j<=iEnd ; j++) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
jQuery('<li '+sClass+'><a href="#">'+j+'</a></li>')
.insertBefore($('li:last', an[i])[0])
.bind('click', function (e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
fnDraw(oSettings);
});
}
// Add/remove disabled classes from the static elements
if (oPaging.iPage === 0) {
jQuery('li:first', an[i]).addClass('disabled');
} else {
jQuery('li:first', an[i]).removeClass('disabled');
}
if (oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0) {
jQuery('li:last', an[i]).addClass('disabled');
} else {
jQuery('li:last', an[i]).removeClass('disabled');
}
}
}
}
});