[英][ jQuery/Datatable ]: datatables not responsive, disable an input search
我遵循jQuery DataTables上的示例,以便使用选择输入搜索创建数据表。
这是我的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 :",
"sLengthMenu": "Afficher _MENU_ éléments",
"sInfo": "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
"sInfoEmpty": "Affichage de l'élement 0 à 0 sur 0 éléments",
"sInfoFiltered": "(filtré de _MAX_ éléments au total)",
"sInfoPostFix": "",
"sLoadingRecords": "Chargement en cours...",
"sZeroRecords": "Aucun élément à afficher",
"sEmptyTable": "Aucune donnée disponible dans le tableau",
"oPaginate": {
"sFirst": "Premier",
"sPrevious": "Précédent",
"sNext": "Suivant",
"sLast": "Dernier"
},
"oAria": {
"sSortAscending": ": activer pour trier la colonne par ordre croissant",
"sSortDescending": ": activer pour trier la colonne par ordre dé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列上进行语言更改和禁用搜索非常有效。
为什么我的数据表无法正确显示。 引导响应式设计不能很好地折叠吗? 如何禁用从列进行的搜索(无输入text
或者在我的tfoot
select
一个列?)
我该怎么做?
感谢您的帮助。
你有没有尝试导入mentionned的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
就像他的答案中提到的@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>
还有其他数据(例如,编辑按钮,链接),则必须在此列上禁用搜索,否则,数据<table>
将出现一些显示问题。
请在此处遵循此示例,以禁用或不显示不需要的<tfoot>
的搜索输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.