jquery - 如何在 jquery 数据表上包装文本?
问题描述
我试图在数据表的帮助下显示一些长文本,但不知何故它没有被包装。这意味着我没有得到多行文本,而是得到一长行。当我去我的数据库并编辑我的描述字段(字段类型是文本)时,我可以在多行中看到文本。
我已经尝试将表格的宽度固定为 100%,但是文本行一直在表格之外。我还尝试添加 word-wrap 和 flex-wrap,并在我的 CSS 上定义一个 text-wrap 类,但它也不起作用。
知道如何解决这个问题吗?
<div style="font-size:18px;">
<table class="table-striped table-hover" id="product_table" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Group</th>
<th>Price</th>
<th>Action</th>
<th class="none">Description DE</th>
<th class="none">Description EN</th>
<th class="none">Description ES</th>
</tr>
</thead>
<tbody>
@foreach($ProductList as $product)
<tr>
<td>{{$product['ProductName']}}</td>
<td>{{$product['ProductGroupName']}}</td>
<td>{{$product['ProductListPrice']}}</td>
<td ><button class="btn btn-primary waves-effect w-md waves-light w-sm-5" data-toggle="modal" data-target="#Edit" data-id="{{$product['ProductID']}}" data-name="{{$product['ProductName']}}" data-group="{{$product['ProductGroupName']}}"
data-price="{{$product['ProductListPrice']}}" data-descde="{{$product['ProductDescriptionDE']}}" data-descen="{{$product['ProductDescriptionEN']}}" data-desces="{{$product['ProductDescriptionES']}}">Edit</button>
<td>{{$product['ProductDescriptionDE']}}</td>
<td>{{$product['ProductDescriptionEN']}}</td>
<td>{{$product['ProductDescriptionES']}}</td>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#product_table').DataTable({
columnDefs: [{
"className": "dt-center",
"targets": "_all"
}],
pageLength: 50,
responsive: true
});
});
</script>
解决方案
尝试wrap
在您的表格中添加课程。
<table class="table-striped table-hover wrap" id="product_table" cellspacing="0" width="100%">
https://datatables.net/forums/discussion/43760/force-datatable-to-wrap-text#Comment_115199
推荐阅读
- powershell - 如何将输入参数传递给 PowerShell 脚本?
- react-native - 通过 route.params 传递状态,React Navigation 返回 undefined
- reactjs - JSX 中的多行 JavaScript?
- kotlin - 启动两个协程并等待单个结果
- firebase - 产生多个命令 - 每个目标的 CocoaPods 不同的 iOS 版本
- python - IndexError:列表索引超出范围:当元素从python中的数组中弹出时
- flutter - 如何将 SslCommerz(如 Bkash、DBBL、Nagad 等)与 Flutter 电子商务 Android 应用程序集成?
- react-native - 如果已安装,则将本机重定向到应用程序,否则到 App Store 或 PlayStore
- powershell - 如何将所有输出流写入 PowerShell 中的变量?
- sql - 识别 NULL 并更新 oracle 中相同的键列