0

我已经在我的应用程序中集成了footable。我已经包含了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 回答