Javascript 立即显示包含第一列的响应扩展名的子行
我有几个数据表正在使用响应扩展。我想立即显示所有childrow信息,所以我尝试使用:Javascript 立即显示包含第一列的响应扩展名的子行,javascript,datatable,datatables,Javascript,Datatable,Datatables,我有几个数据表正在使用响应扩展。我想立即显示所有childrow信息,所以我尝试使用:childRowImmediate,它只适用于除第一行以外的所有行 如何确保所有行的外观相同 我的整个数据表代码: $('#datatable').DataTable( { "pageLength": 50, "autoWidth": false, "scrollX": true, responsive: {
childRowImmediate
,它只适用于除第一行以外的所有行
如何确保所有行的外观相同
我的整个数据表代码:
$('#datatable').DataTable( {
"pageLength": 50,
"autoWidth": false,
"scrollX": true,
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.childRowImmediate,
type: 'none',
target: ''
}
}
} );
在下面的示例中,您可以看到所有行都排列在一起(按钮和状态除外,因为没有空格,但您仍然可以看到粗体的行名称及其后面的值)。但是第一个(Bestelling,带有狗的图像)的样式仍然像一个普通的行。为什么?
如何确保Bestelling
和狗图像的样式与下面的行相同
数据表HTML:
<div class="tab-content dashboard-content">
<div class="tab-pane fade active" id="orders">
<div class="table-responsive">
<div id="datatable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="dataTables_length" id="datatable_length">
<label>
<select name="datatable_length" aria-controls="datatable" class="custom-select custom-select-sm form-control form-control-sm">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Resultaten weergeven
</label>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div id="datatable_filter" class="dataTables_filter">
<label>Zoeken:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="datatable" /></label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="dataTables_scroll">
<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 806px; padding-right: 0px;">
<table class="table dataTable no-footer" role="grid" style="margin-left: 0px; width: 806px;">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 83px;" aria-label="Bestelling: activeer om kolom oplopend te sorteren">Bestelling</th>
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 112px;" aria-label="Ordernummer: activeer om kolom oplopend te sorteren">Ordernummer</th>
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 106px;" aria-label="Besteldatum: activeer om kolom oplopend te sorteren">Besteldatum</th>
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 58px;" aria-label="Status: activeer om kolom oplopend te sorteren">Status</th>
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 54px;" aria-label="Totaal: activeer om kolom oplopend te sorteren">Totaal</th>
<th class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" style="width: 141px;" aria-label="Acties: activeer om kolom oplopend te sorteren">Acties</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table class="table dataTable no-footer dtr-none" id="datatable" role="grid" aria-describedby="datatable_info">
<thead>
<tr role="row" style="height: 0px;">
<th
class="sorting"
aria-controls="datatable"
rowspan="1"
colspan="1"
style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 83px;"
aria-label="Bestelling: activeer om kolom oplopend te sorteren"
>
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Bestelling</div>
</th>
<th
class="sorting"
aria-controls="datatable"
rowspan="1"
colspan="1"
style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 112px;"
aria-label="Ordernummer: activeer om kolom oplopend te sorteren"
>
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Ordernummer</div>
</th>
<th
class="sorting"
aria-controls="datatable"
rowspan="1"
colspan="1"
style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 106px;"
aria-label="Besteldatum: activeer om kolom oplopend te sorteren"
>
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Besteldatum</div>
</th>
<th
class="sorting"
aria-controls="datatable"
rowspan="1"
colspan="1"
style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 58px;"
aria-label="Status: activeer om kolom oplopend te sorteren"
>
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Status</div>
</th>
<th
class="sorting"
aria-controls="datatable"
rowspan="1"
colspan="1"
style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 54px;"
aria-label="Totaal: activeer om kolom oplopend te sorteren"
>
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Totaal</div>
</th>
<th
class="sorting"
aria-controls="datatable"
rowspan="1"
colspan="1"
style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 141px;"
aria-label="Acties: activeer om kolom oplopend te sorteren"
>
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Acties</div>
</th>
</tr>
</thead>
<tbody class="ordertable">
<tr class="odd">
<td style="">
<img
class="prodthumb"
src="https://printzelf-studionm.nl-ams1.upcloudobjects.com/orders/orders/33/33.1347/60896023a7e48/1/preview/thumbnail.jpg"
onerror="this.src='cms/images/producten/universele-folie/afbeeldingen/orajet_folie_transparant.jpg'"
/>
</td>
<td>33.1347</td>
<td data-sort="1619616423">28-04-2021</td>
<td><span class="orangestate">Betaald</span></td>
<td>€ 44,00</td>
<td>
<a class="yellowbtn btn view mb-10" href="order/1347">Bekijk order</a>
<a class="yellowbtn btn view mb-10" download="" href="invoices/118.1819779.pdf">Download factuur</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-5"><div class="dataTables_info" id="datatable_info" role="status" aria-live="polite">1 tot 1 van 1 resultaten</div></div>
<div class="col-sm-12 col-md-7">
<div class="dataTables_paginate paging_simple_numbers" id="datatable_paginate">
<ul class="pagination">
<li class="paginate_button page-item previous disabled" id="datatable_previous"><a href="#" aria-controls="datatable" data-dt-idx="0" tabindex="0" class="page-link">Laatste</a></li>
<li class="paginate_button page-item active"><a href="#" aria-controls="datatable" data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
<li class="paginate_button page-item next disabled" id="datatable_next"><a href="#" aria-controls="datatable" data-dt-idx="2" tabindex="0" class="page-link">Volgende</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
10
25
50
100
结果韦尔根
佐肯:
贝斯特林
订货人
贝斯特达图
地位
托塔尔
活动
贝斯特林
订货人
贝斯特达图
地位
托塔尔
活动
33.1347
28-04-2021
贝塔尔德
€ 44,00
共1辆货车1辆结果表