2013-08-31 127 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