CODEWITHSUNDEEP
jquerydatatabledatatables
Teddybugs
Teddybugs

Reputation: 1244

Jquery Datatables responsive not working properly

I'm using data tables with responsive plugin,

https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.css
https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.js

Here is my screen result:

Desktop view: view on desktop mode

Mobile view top:

mobile view 1

Mobile view bottom:

mobile view 2

My JS code:

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

});

My table's 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

Question:

1) On mobile view, how to get the Long organization name, showing perfectly? like BR?

2) How to get rid the horizontal scroll on the bottom, so that user no need to scroll on mobile view?

Upvotes: 3

Views: 10239

Answers (1)

Teddybugs
Teddybugs

Reputation: 1244

added : width="100%" into table solved the problem

<table id="agency_data" class="table table-bordered table-striped" width="100%">

Upvotes: 8

Related Questions