我想用DataTable 1.13.4
和Bootstrap 5.2.3
使表响应,但当我在移动终端上测试我的表时(用Firefox,而不是在真实的设备上),我的表包含一个小的水平滚动条,但删除了列。
就像DataTable的官方文档中所解释的那样,我用Yarn安装了两个依赖项:
datatables.net-bs5
(Bootstrap 5的DataTable)datatables.net-responsive-bs5
(用于启用Bootstrap 5响应的插件)
我知道在声明表之前需要添加Bootstrap 5 table-responsive
类,但我想修复分页和过滤器,因此在示例化DataTable对象(dom: 'f<"table-responsive"t>...
)时,我在JavaScript中构建了dom
选项。
Click here to see the result on desktop screen
Click here to see the result on mobile screen
水平滚动条在屏幕截图上不可见,但在桌面和移动的屏幕上存在。它只是非常小(像5/10像素),不允许看到移动的屏幕上的Description
列,这是目前在桌面屏幕上。
我的JavaScript文件:
import {Controller} from '@hotwired/stimulus';
import DataTable from "datatables.net-bs5";
import "datatables.net-responsive-bs5";
export default class extends Controller {
connect() {
new DataTable('#tableMenu', {
pageLength: 5,
responsive: true,
dom: 'f<"table-responsive"t><"row"<"col-sm-12 col-lg-6 mb-3 mb-lg-0"i><"col-sm-12 col-lg-6 d-lg-flex justify-content-lg-end"p>>'
});
}
}
我的HTML文件:
<table id="tableMenu" class="table table-striped">
<thead>
<tr>
<th></th>
<th>Titre</th>
<th>Prix</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for menu in menus %}
<tr>
<td>
<a href="{{ path('app.admin.menu.edit', {'id': menu.id}) }}" class="btn btn-primary">
<i class="fa fa-pen" style="font-size: 10px;"></i>
</a>
<button type="button"
id="delete-menu"
data-delete-url="{{ path('api.menu.delete', {'id': menu.id}) }}"
class="btn btn-danger">
<i class="fa fa-xmark" style="font-size: 10px;"></i>
</button>
</td>
<td>{{ menu.title }}</td>
<td>{{ menu.price / 100 }}€</td>
<td>{{ menu.description }}</td>
</tr>
{% endfor %}
<tfoot>
<tr>
<th></th>
<th>Titre</th>
<th>Prix</th>
<th>Description</th>
</tr>
</tfoot>
</table>
感谢大家的帮助!🫶
1条答案
按热度按时间bakd9h0s1#
经过多次研究,我找到了解决办法。
我保留了与原始问题相同的代码,但只是在我的
<tr>
属性上添加了两个类:overflow-hidden
text-nowrap
所以,我的JavaScript文件没有任何更改
我的HTML文件看起来像这样: