2013-08-31 121 views
0

我在应用程序中集成了脚标。我已经包含footable.js,footable.filter.js,footable.paginate.js,footable.sort.js和css文件(footable.core.css和footable.metro.css)。分页和过滤工作正常,但排序不起作用。排序不起作用

<table class='footable' data-page-navigation=".pagination" data-filter="#filter" data-page-size="10" data-page-previous-text="prev" data-page-next-text="next"> 
    <thead> 
    <tr> 
     <th data-sort-initial="true" class='sort-column'>Name</th> 
     <th class='sort-column'>Description</th>  
     <th>Actions</th>  
     <th>Manage</th> 
    </tr> 
    </thead> 

    <tbody> 
    <% @fee_categories.each do |fee_category| %> 
     <tr> 
     <td><%= link_to fee_category.name, fee_category %></td> 
     <td><%= fee_category.description %></td> 
     <td>   
      <%= link_to edit_fee_category_path(fee_category) do %> 
      <i class='icon-white icon-pencil btn-primary btn'></i> 
      <% end %> 
      <%= link_to fee_category, method: :delete, data: { confirm: 'Are you sure?' } do %> 
      <i class='icon-white icon-remove btn-danger btn'></i> 
      <% end %> 
     </td> 
     <td><%= link_to "Add Particulars", "#" %></td> 
     </tr> 
    <% end %> 
    </tbody> 
    <tfoot class="hide-if-no-paging"> 
    <tr> 
     <td colspan="5"> 
     <div class="pagination pagination-centered"></div> 
     </td> 
    </tr> 
    </tfoot> 
</table> 

和js文件是

$('.footable').footable(); 
+0

你的脚本的顺序是什么? –

+0

按名称排列 –

+0

以及箭头也没有显示在表中。 –

回答

2

我只是有一个类似的问题。我解决这个问题的方式是在开始工作之前删除所有额外的选项。通过这样做,我能够找到造成问题的原因。在我的情况下,我有“数据排序='错误'”,我没有想到它。

这是否对你的工作:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <link href="../css/footable.core.css" rel="stylesheet" type="text/css" /> 
    <script src="../js/jquery-2.0.3.js" type="text/javascript"></script> 
    <script src="../js/footable.js" type="text/javascript"></script> 
    <script src="../js/footable.sort.js" type="text/javascript"></script> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <th data-type="numeric" data-sort-initial="true">Number</th> 
       <th>Leter</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>2</td> 
       <td>B</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>C</td> 
      </tr> 
      <tr> 
       <td>1</td> 
       <td>A</td> 
      </tr> 
     </tbody> 
    </table> 
    <script type="text/javascript"> 
     $(function() { 
      $('table').footable(); 
     }); 
    </script> 
</body> 
</html> 

我看到你正在尝试使用分页太多。也许如果你只专注于排序,然后添加分页,你可能会有更好的运气。

+0

它正在工作。但排序符号没有出现,而是有一个圆圈。我已经包含footable.core.css和footable.metro.css。 –

+0

如果您删除footable.metro.css,会发生什么情况?我遇到的一个问题是我将类信息添加到标题,这会导致奇怪的结果。你不需要添加任何东西到表中。在我上面的示例中,除了Number列之外,我不在中添加任何班级信息,这是因为footable会为您添加。 – Jeff