[英][ 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.