我正在使用带有响应式插件的数据表,
https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.css
https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.js
这是我的屏幕结果:
移动 View 顶部:
移动 View 底部:
我的 JS 代码:
dataTable = $('#agency_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
responsive: true,
"language": {
"infoFiltered": ""
},
"ajax":{
url:base_url+"/agency-listing",
type:"POST"
},
"columnDefs":[
{
"targets":[0, 3], //first and last not sortable
"orderable":false,
},
],
});
我的表格的 HTML:
<table id="agency_data" class="table table-bordered table-striped">
<thead>
<tr class="info">
<th width="10%">ID</th>
<th width="15%">Agency Code</th>
<th width="65%">Agency Name</th>
<th width="15%">Action</th>
</tr>
</thead>
</table>
JSFIDDLE: HERE
问题:
1) 在移动端 View 中,如何获得长组织名称,完美显示?喜欢BR?
2)如何摆脱底部的水平滚动,以便用户无需在移动 View 上滚动?
最佳答案
在表中添加:width="100%"解决了问题
<table id="agency_data" class="table table-bordered table-striped" width="100%">
关于Jquery 数据表响应无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45851452/