[英][ jQuery/Datatable ]: datatables not responsive, disable an input search
I follow the example on the jQuery DataTables in order to make a datatable with select input search. 我遵循jQuery DataTables上的示例,以便使用选择输入搜索创建数据表。
Here's my html code example: 这是我的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>
So here's my javascript code for datatables: 因此,这是我的数据表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>' );
});
});
}
});
});
Like you can see, I change the language in french, and disable search for colums 5, because I don't want allow user to make a search based on this colum. 如您所见,我更改了法语的语言,并禁用了对列5的搜索,因为我不想允许用户基于该列进行搜索。 So the language changement and the disable search on the column 5 work really good.
因此,在第5列上进行语言更改和禁用搜索非常有效。
Why my datatables don't display correctly. 为什么我的数据表无法正确显示。 It's not collapsing well with bootstrap responsive design?
引导响应式设计不能很好地折叠吗? How can I disable a search from a column (no input
text
or select
in my tfoot
under a column? 如何禁用从列进行的搜索(无输入
text
或者在我的tfoot
select
一个列?)
How can I do it? 我该怎么做?
Thank you for the help. 感谢您的帮助。
Did you try to import the cdn mentionned here 你有没有尝试导入mentionned的CDN 这里
CSS: //cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css
CSS:
//cdn.datatables.net/responsive/1.0.3/css/dataTables.responsive.css
JS: //cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js
JS:
//cdn.datatables.net/responsive/1.0.3/js/dataTables.responsive.js
Like @Gab mentionned in his answer, you need to import the cdn of jQuery dataTables like this: 就像他的答案中提到的@Gab一样,您需要像这样导入jQuery dataTables的CDN:
First you need to disable or remove datatables CSS you have in your folders, if you don't it does not match or display correctly your <table>
. 首先,您需要禁用或删除文件夹中的数据表CSS,如果不匹配或无法正确显示
<table>
。
Then import 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
然后导入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
Just in case, if you have any other data in your <table>
, like an edit button, a link, you have to disable search on this column, if you don't your datatables will have some displaying problems. 以防万一,如果
<table>
还有其他数据(例如,编辑按钮,链接),则必须在此列上禁用搜索,否则,数据<table>
将出现一些显示问题。
Follow this ewample here in order to disable or don't display the search input in your <tfoot>
you don't want. 请在此处遵循此示例,以禁用或不显示不需要的
<tfoot>
的搜索输入。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.