jQuery数据表响应无法正常工作

Ted*_*ugs 2 datatable jquery datatables

我正在使用带有响应式插件的数据表,

https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.css
https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.js
Run Code Online (Sandbox Code Playgroud)

这是我的屏幕结果:

桌面视图: 在桌面模式下查看

移动视图顶部:

行动检视1

移动视图底部:

行动检视2

我的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,
        },          
    ],

}); 
Run Code Online (Sandbox Code Playgroud)

我表格的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>
Run Code Online (Sandbox Code Playgroud)

JSFIDDLE: 这里

题:

1)在移动视图上,如何获得完整显示的Long组织名称?像BR?

2)如何摆脱底部的水平滚动,使用户无需在移动视图上滚动?

Ted*_*ugs 5

在表中添加了:width =“ 100%”解决了该问题

<table id="agency_data" class="table table-bordered table-striped" width="100%">
Run Code Online (Sandbox Code Playgroud)

  • 如果解决了您的问题,请[接受您自己的答案](https://stackoverflow.blog/2009/01/06/accept-your-own-answers/) (2认同)