0

我有一个在 Heroku 上运行的 Rails 3.1 应用程序，我在其中使用带有 jQ​​uery 的 Bootstrap v1.4（我需要使用 Bootstrap 1 - 所以我不能移动到版本 2）数据表。虽然数据表在本地看起来很好，但当我将更改移动到 Heroku 时，它不起作用。

特别是，它没有显示有多少行的文本，也没有在分页后放置换行符/间距。此外，该表对数据进行了正确排序，但分页不起作用（它不显示页码，并且 Next/Previous 链接不执行任何操作）。

在本地，数据表的底部看起来像这样。

然而，在 Heroku 上它看起来像这样。

我在Datatables 博客上实现了代码。

我的布局文件在标题中如下所示：

<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;
}

应用程序.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 博客的代码）

      /* 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="#">&larr; '+oLang.sPrevious+'</a></li>'+
            '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </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');
          }
        }
      }
    }
  } );
4

1 回答 1

0

不确定它是否会有所帮助，但它对我的一张桌子有帮助......

尝试将“显示”添加到表类：

<table class="bordered-table zebra-striped display" id="datatable" >
于 2012-09-23T22:58:33.873 回答