[英]Datatable doesn't respect screen width on resize
我有一個在屏幕調整大小時不尊重屏幕寬度的數據表。
我嘗試將寬度設置為 100%,但沒有奏效。
我嘗試創建一個寬度為 100% 的父 div,但也沒有用。
嘗試了自動寬度。 它沒有用。
'autowidth': false,
嘗試過表格布局:已修復但沒有用
table{table-layout:fixed}
我使用 php 來回顯每一行的答案,然后初始化數據表。
<table id="produtos" class="hover display wrap dataTable no-footer dtr-inline collapsed" style="width: 100%;" role="grid" aria-describedby="produtos_info">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 53px;" aria-sort="ascending" aria-label="Pedido: Ordenar colunas de forma descendente">Pedido</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 59px;" aria-label="Cliente: Ordenar colunas de forma ascendente">Cliente</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Situação: Ordenar colunas de forma ascendente">Situação</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 86px;" aria-label="Pagamento: Ordenar colunas de forma ascendente">Pagamento</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 101px;" aria-label="Classif.: Ordenar colunas de forma ascendente">Classif.</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Emissão: Ordenar colunas de forma ascendente">Emissão</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 72px;" aria-label="Produção: Ordenar colunas de forma ascendente">Produção</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 67px;" aria-label="Faturam.: Ordenar colunas de forma ascendente">Faturam.</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Financ.: Ordenar colunas de forma ascendente">Financ.</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 66px;" aria-label="Exped.: Ordenar colunas de forma ascendente">Exped.</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 62px;" aria-label="Nº NF: Ordenar colunas de forma ascendente">Nº NF</th>
<th class="sorting" tabindex="0" aria-controls="produtos" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="Entrega: Ordenar colunas de forma ascendente">Entrega</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1 dtr-control">999999<input type="hidden" name="data[TESTE_C1]" value="08" id="TESTE_C1"></td>
<td>NOME TESTE</td>
<td>Faturado total</td>
<td>Boleto</td>
<td>TESTE</td>
<td>21/01/2020</td>
<td>/ /</td>
<td>21/01/2020</td>
<td>21/01/2020</td>
<td>22/01/2020</td>
<td>99999999</td>
<td style="display: none;">sem dados</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1 dtr-control">999999<input type="hidden" name="data[TESTE_C1]" value="08" id="TESTE_C1"></td>
<td>NOME TESTE</td>
<td>Faturado total</td>
<td>Boleto</td>
<td>TESTE</td>
<td>09/10/2020</td>
<td>/ /</td>
<td>09/10/2020</td>
<td>09/10/2020</td>
<td>09/10/2020</td>
<td>99999999</td>
<td style="display: none;">sem dados</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1 dtr-control">A84505<input type="hidden" name="data[TESTE_C1]" value="08" id="TESTE_C1"></td>
<td>NOME TESTE</td>
<td>Faturado total</td>
<td>Pago</td>
<td>TESTE</td>
<td>13/10/2020</td>
<td>/ /</td>
<td>14/10/2020</td>
<td>14/10/2020</td>
<td>19/10/2020</td>
<td>99999999</td>
<td style="display: none;">sem dados</td>
</tr>
</tbody>
</table>
數據表配置
var table = $('#produtos').DataTable({
responsive: true,
autowidth: false,
stateSave: true,
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese.json"
},
dom: 'Bfrtip',
buttons: [
//'copyHtml5',
//'excelHtml5',
//'csvHtml5',
//'pdfHtml5'
],
});
上面的數據表是屏幕上生成的代碼。
導入的文件:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.21/af-2.3.5/b-1.6.3/b-colvis-1.6.3/b-flash-1.6.3/b-html5-1.6.3/b-print-1.6.3/cr-1.5.2/fc-3.3.1/fh-3.1.7/kt-2.5.2/r-2.2.5/rg-1.1.2/rr-1.2.7/sc-2.0.2/sp-1.1.1/sl-1.3.1/datatables.min.js"></script>
我認為這是不可能的,但您可以制作一個響應式數據表,並為數據表提供響應式擴展。
在您的代碼中添加以下行:
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
因此,它似乎是數據表響應插件的錯誤。
為了解決這個問題,我不得不改變 CSS 與一些特定屏幕尺寸的媒體查詢。
我搜索了很多,沒有找到任何解決我問題的答案。
當屏幕重新調整數據表的大小時工作正常,但是當它從 ajax 請求回調時,它不會。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.