Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/407.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 立即显示包含第一列的响应扩展名的子行_Javascript_Datatable_Datatables - Fatal编程技术网

Javascript 立即显示包含第一列的响应扩展名的子行

Javascript 立即显示包含第一列的响应扩展名的子行,javascript,datatable,datatables,Javascript,Datatable,Datatables,我有几个数据表正在使用响应扩展。我想立即显示所有childrow信息,所以我尝试使用:childRowImmediate,它只适用于除第一行以外的所有行 如何确保所有行的外观相同 我的整个数据表代码: $('#datatable').DataTable( { "pageLength": 50, "autoWidth": false, "scrollX": true, responsive: {

我有几个数据表正在使用响应扩展。我想立即显示所有childrow信息,所以我尝试使用:
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辆结果表