[ jQuery/Datatable ]: 数据表没有响应，禁用输入搜索

Question

我遵循 jQuery DataTables 上的示例，以便使用 select 输入搜索创建数据表。

这是我的 html 代码示例：

<div class="jumbotron">
<table id="dataTables" class="display" cellspacing="0" width="100%">
        <thead>
        <tr>
          <th>Référence</th>
          <th>Activité(s)</th>
          <th>Parc immobilier</th>
          <th>Nom du Bâtiment</th>
          <th>Ensemble</th>
          <th></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Référence</th>
          <th>Activité(s)</th>
          <th>Parc immobilier</th>
          <th>Nom du Bâtiment</th>
          <th>Ensemble</th>
          <th></th>
        </tr>
      </tfoot>
      <tbody>
        {% for batiment in batiment %}
          <tr>
            <td>{{ batiment.referencebatiment }}</td>
            <td>
              {% for batiment in batiment.typesactivite %}
                {{ batiment.type }}
                <br>
              {% endfor %}
            </td>
            <td>{{ batiment.ensembles.parcsimmobilier }}</td>
            <td>{{ batiment.nom }}</td>
            <td>{{ batiment.ensembles }}</td>
            <td><a href=""><button class="btn btn-edit btn-xs sharp">Modifier</button></a></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

所以这是我的 javascript 数据表代码：

$(document).ready(function() {
    $('#dataTables').DataTable( {
        responsive: true,
        //enlever la recherche sur une colone, ici la colone 2 et 4 => Office et Date. Attention 0 est une valeur, les colones commencent donc à partir de 0
        "aoColumnDefs": [
        { "bSearchable": false, "aTargets": [ 5 ] }],
        //
        //langue française
        "language": {
            "sProcessing":     "Traitement en cours...",
            "sSearch":         "Rechercher&nbsp;:",
            "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
            "sInfo":           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
            "sInfoEmpty":      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            "sInfoPostFix":    "",
            "sLoadingRecords": "Chargement en cours...",
            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
            "oPaginate": {
                "sFirst":      "Premier",
                "sPrevious":   "Pr&eacute;c&eacute;dent",
                "sNext":       "Suivant",
                "sLast":       "Dernier"
            },
            "oAria": {
                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
            }
        },
        initComplete: function () {
            var api = this.api();
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty())
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    });
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                });
            });
        }
    });
});

如您所见，我更改了法语语言，并禁用了对第 5 列的搜索，因为我不想让用户基于该列进行搜索。因此，第 5 列的语言更改和禁用搜索效果非常好。

为什么我的数据表显示不正确。 bootstrap 响应式设计不能很好地折叠？如何禁用列搜索（我的 tfoot 列下没有输入 text 或 select？

我该怎么做？

感谢您的帮助。

Answer 1

您是否尝试导入提到的 cdn here

CSS: //cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css

JS: //cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js

Answer 2

就像@Gab 在他的回答中提到的那样，您需要像这样导入 jQuery dataTables 的 cdn：

首先，您需要禁用或删除文件夹中的数据表 CSS，否则它不会匹配或正确显示您的 <table>。

然后导入CDN： CSS: //cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css JS：//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js

以防万一，如果您的 <table> 中有任何其他数据，例如编辑按钮，link，您必须禁用对此列的搜索，如果您不这样做数据表会有一些显示问题。

关注此示例 here 以禁用或不显示您不想要的 <tfoot> 中的搜索输入。

[ jQuery/Datatable ]: 数据表没有响应，禁用输入搜索

[ jQuery/Datatable ]: datatables not responsive, disable an input search

html

javascript

datatable

jquery