Yajra datatables & materializecss 下拉列表on responsive

Question

我有一个下拉菜单在一个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
}
);
}
}

Answer 1

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