Yajra 数据表和 materializecss 响应式下拉菜单答案

【问题标题】：Yajra datatables & materializecss dropdown on responsiveYajra 数据表和 materializecss 响应式下拉菜单
【发布时间】：2021-07-25 12:48:44
【问题描述】：

我在 yajra 数据表中有一个下拉菜单。该菜单是使用 addColumn 函数构建的，并且在桌面上运行良好。但是在移动设备上，菜单不会在点击时显示。这是我的代码：

->addColumn('status', function($orders) use ($orderStatuses){             
           
                $headerElement = '<span id="selectedValue" class="center-align dropdown-trigger chip lighten-4 '. $orders->status->styles .'" data-target="status-options-'.$orders->id.'" style="width: 110px;">'. $orders->status->localized . '</span>';
                if(Auth::user()->hasRole(['Super Administratör', 'Administratör']))
                {
                    $mainElement = '<ul id="status-options-'.$orders->id.'" class="dropdown-content">';
                    $bodyElement = "";
                    foreach($orderStatuses as $status)
                    {                    
                        if($status->id != $orders->status->id)
                            $bodyElement .= '<li class="center-align valign-wrapper"><span class="statusSelection center-align chip lighten-4 '. $status->styles .' valign center-block" data-status="'. $status->id .'" data-order-id="'.$orders->id.'">'. $status->localized . '</span></li>';
                    }
                        $footerElement = '</ul>';
                        $constructedElement = $headerElement . $mainElement . $bodyElement . $footerElement; 
                } 
                else
                {
                    $constructedElement = $headerElement;
                }       

                return $constructedElement;
            })

以及我初始化下拉菜单的方式：

fnDrawCallback: function( oSettings ) {
    if(isAdmin || isSuperAdmin)
    {
        $('.dropdown-trigger').dropdown({
                inDuration: 300,
                outDuration: 225,
                constrainWidth: true, // Does not change width of dropdown to that of the activator
                hover: false, // Activate on hover
                gutter: 0, // Spacing from edge
                coverTrigger: true, // Displays dropdown below the button
                alignment: 'center', // Displays dropdown with edge aligned to the left of button
                stopPropagation: false // Stops event propagation
            }
        );
    }
}

【问题讨论】：

标签： php laravel datatables

【解决方案1】：

对我有用的一种解决方法是在移动设备上默认显示该列，因为它看起来像数据表上的 + 按钮，将数据动态添加到 DOM，因此列表无法正确呈现。因此，将列表添加到默认显示的列表中，无需进一步编码即可解决问题。

【讨论】：