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();
4

1 に答える 1

4

私はちょうど同様の問題を抱えていました。私がそれを解決した方法は、それが機能し始めるまで余分なオプションをすべて削除することでした. そうすることで、問題の原因を突き止めることができました。私の場合、予想外の場所に「data-sort = 'false'」がありました。

これはあなたのために働きますか：

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

ページネーションも使用しようとしているようです。並べ替えだけに集中してページネーションを追加すると、運が良くなるかもしれません。

于 2013-10-17T16:53:13.700 に答える