英文:
DataTable Responsive deletes columns with Bootstrap 5
问题
我想使用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选项构建到我的JavaScript中（dom: 'f<"table-responsive"t>...'）。
水平滚动条在截图上不可见，但在桌面和移动屏幕上都存在。它只是非常小（大约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>
感谢大家的帮助！ 🎉
英文:
I want to make a table responsive with DataTable 1.13.4 and Bootstrap 5.2.3 but when I test my table on mobile device (with Firefox, not on a real device) my table contains a small horizontal scrollbar but removes columns.
Like explained in the official documentation of DataTable, I have install two depedencies with Yarn :
datatables.net-bs5(DataTable for Bootstrap 5)datatables.net-responsive-bs5(Plugin to enable responsive for Bootstrap 5)
I know I need to add the Bootstrap 5 table-responsive class before declaring my table, but I want to fixed the pagination and the filter, so I've built the dom option into my JavaScript when I instantiate the DataTable object (dom: 'f<"table-responsive"t>...)
Click here to see the result on desktop screen
Click here to see the result on mobile screen
The horizontal scroll bar is not visible on screenshots, but is present on desktop and mobile screen. It's just very small (like 5/10 pixels) and doesn't allow to see the Description column on mobile screen which is present in the desktop screen.
My JavaScript file :
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>>'
});
}
}
My HTML file :
<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>
Thanks to all for your help ! 🫶
答案1
得分: 1
经过许多研究，我找到了一个解决方案。
我保持了与原始问题相同的代码，只是在我的<tr>属性上添加了两个类：
overflow-hiddentext-nowrap
因此，我的JavaScript文件没有任何更改
而我的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 class="overflow-hidden text-nowrap">
<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>
英文:
After many research, I have found a solution.
I have keep the same code like the original issue but juste added two classes on my <tr> attribute :
overflow-hiddentext-nowrap
So, my JavaScript file doesn't has any changes
And my HTML file looks like this :
<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 class="overflow-hidden text-nowrap">
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论