数据表javascript不会在页面上显示图标

Question

我正在使用rails中的javascript数据表。

我有一个表格，其中包含列中的图标而不是单词（当您点击操作时）。

我的表：

<md-table-container>
  <table
    md-table id="table" cellspacing="0" width="50%">
    <thead
      md-head>
      <tr md-row>
        <th md-column>#</th>
        <% attributes.each do |attribute| %>
          <th md-column><%= attribute[:human_name] %></th>
        <% end %>
        <th md-column><%= t('actions', scope: :crud_views) %></th>
      </tr>
    </thead>

    <tbody
      md-body>
      <% records.each_with_index do |record, index| %>
      <tr md-row>
        <td md-cell><%= "#{index + 1}" %></td>

        <% attributes.each do |attribute| %>
          <td md-cell><%= record.send(attribute[:name]) %></td>
        <% end %>

        <td md-cell layout="row">
          <% if policy(record).show? %>
            <md-button
              href="<%= polymorphic_path(record) %>"
              class="md-small" >
              <md-tooltip md-direction="top">
                <%= t('details', scope: :crud_views) %>
              </md-tooltip>
              <md-icon ng-md-icon icon="visibility" size="16"></md-icon>
            </md-button>
          <% end -%>

          <% if policy(record).edit? %>
            <md-button
              href="<%= polymorphic_path(record, action: 'edit') %>"
              class="md-small" >
              <md-tooltip md-direction="top">
                <%= t('edit_resource', scope: :crud_views, resource: model.model_name.human) %>
              </md-tooltip>
              <md-icon ng-md-icon icon="mode_edit" size="16"></md-icon>
            </md-button>
          <% end -%>

          <% if policy(record).destroy? %>
            <md-button
              href="<%= polymorphic_path(record) %>"
              data-method="delete"
              data-title="<%= t('confirmation_required', scope: :crud_views) %>"
              data-confirm="<%= t('are_you_sure', scope: :crud_views) %>"
              class="md-small" >
              <md-tooltip md-direction="top">
                <%= t('delete_resource', scope: :crud_views, resource: model.model_name.human) %>
              </md-tooltip>
              <md-icon ng-md-icon icon="delete" size="16"></md-icon>
            </md-button>
          <% end -%>
        </td>
      </tr>
      <% end %>
    </tbody>
  </table>
</md-table-container>

重要的部分：

<td md-cell layout="row">
          <% if policy(record).show? %>
            <md-button
              href="<%= polymorphic_path(record) %>"
              class="md-small" >
              <md-tooltip md-direction="top">
                <%= t('details', scope: :crud_views) %>
              </md-tooltip>
              <md-icon ng-md-icon icon="visibility" size="16"></md-icon>
            </md-button>
          <% end -%>

          <% if policy(record).edit? %>
            <md-button
              href="<%= polymorphic_path(record, action: 'edit') %>"
              class="md-small" >
              <md-tooltip md-direction="top">
                <%= t('edit_resource', scope: :crud_views, resource: model.model_name.human) %>
              </md-tooltip>
              <md-icon ng-md-icon icon="mode_edit" size="16"></md-icon>
            </md-button>
          <% end -%>

          <% if policy(record).destroy? %>
            <md-button
              href="<%= polymorphic_path(record) %>"
              data-method="delete"
              data-title="<%= t('confirmation_required', scope: :crud_views) %>"
              data-confirm="<%= t('are_you_sure', scope: :crud_views) %>"
              class="md-small" >
              <md-tooltip md-direction="top">
                <%= t('delete_resource', scope: :crud_views, resource: model.model_name.human) %>
              </md-tooltip>
              <md-icon ng-md-icon icon="delete" size="16"></md-icon>
            </md-button>
          <% end -%>
        </td>

一行看起来像这样（参见最后一栏 ）：

看起来很完美！就像我想要的那样。

问题：进入下一页时，不再显示图标。

最后一栏显示（西班牙语）行动

Detalles = Eye
Editar Usuario = Edit icon
Eliminar Usuario = Delete icon

第二个问题：单词不会重定向到操作（我无法单击“详细信息”或“编辑用户”）。

所以：

如何正确加载表格？ 其他信息：进行搜索时，如果包含下一页的结果，则图标也不显示（显示不正确）

编辑： SCRIPT：

$(document).ready(function() {
    $('#table').DataTable( {
      info: false,
      language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    },
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                text: 'Exportar a Excel',
                filename: "Datos Exportados",
                exportOptions: {
                    columns: columns
                }
            },
            {
                extend: 'pdfHtml5',
                text: 'Exportar a PDF',
                filename: "Datos Exportados",
                exportOptions: {
                    columns: columns
                }
            },
        ]
    } );
} );