Jquery data table not work properly after add meta tags

Question

I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone it's not responsive to the mobile view.

After I add following line :

<meta name="viewport" content="width=device-width, initial-scale=1.0, user- 
  scalable=no">

this meta data for jsp pages.
after my web site responsive for mobile phone. But jQuery data table not working properly after add this meta tag. So my question is how i can handle both together?

this is my data table code

      function loaddatatable(rows, page, username, merchantId, status, search) {

                var table = $('#table1').DataTable({
                    dom: '<"toolbar">frtip',
                    paging: false,
                    info: false,
                    bDestroy: true,
                    order: [],
                    sort: "position",
                    searching: false,
                    responsive: true,
                    sAjaxSource: "ListMerchant.blb?rows=" + rows + "&page=" + page + "&userName="
                            + username + "&merchantId=" + merchantId + "&status=" + status + "&search=" + search + "",


                    columnDefs: [
                        {
                            "title": "Merchant Id",
                            "mData": "merchantId",
                            "targets": 0
                        },
                        {
                            "title": "User Name",
                            "mData": "userName",
                            "targets": 1
                        }, {
                            "title": "Channel Type",
                            "mData": "channeltype",
                            "targets": 2
                        }, {
                            "title": "User Name",
                            "mData": "channeltype",
                            "targets": 3
                        }, {
                            "title": "Status",
                            "mData": "status",
                            "targets": 4
                        }, {
                            "title": "Active/Deactive",
                            "render": function(data, type, full, meta) {
                                tablelenght = full.fullCount;
                                return actdectformatter(full);
                            },
                            "targets": 5
                        }, {
                            "title": "Password Reset",
                            "render": function(data, type, full, meta) {
                                return pwresetformatter(full);
                            },
                            "targets": 6
                        }, {
                            "title": "Edit",
                            "render": function(data, type, full, meta) {
                                return editformatter(full);
                            },
                            "targets": 7
                        },
                        {
                            "title": "Assign Transaction",
                            "render": function(data, type, full, meta) {
                                return assigntxnformatter(full);
                            },
                            "targets": 8
                        }

                    ], initComplete: function(settings, json) {
                        tablelenght = json.total;
                        var pagecount = parseInt($('#page').val());
                        var row = parseInt($('#row').val());
                        var end = pagecount * row;
                        var start = (pagecount * row) - row;
                        if (end > tablelenght) {
                            end = tablelenght;
                        }
                        var maxpage = Math.ceil(tablelenght / row);
                        $('#tablelength').html(tablelenght);
                        $('#maxpage').html(maxpage);
                        $('#start').html(start);
                        $('#end').html(end);
                    }
                });
}

fist time data table load properly. When I call a back-end action data table headers not load properly. Fist time data tabel.

when I have submitted value to back-end after reload data table header not load properly

I have checked inspect element then I saw automatically set this style for headers

<th class="sorting" tabindex="0" aria-controls="table12" rowspan="1" colspan="1" style="width: 0px; display: none;" aria-label="User Name: activate to sort column ascending">User Name</th>  

How should I avoid this??

Answer 1

Override the current style in every page refresh using following class styling.

<style>
            .sorting{
                display: table-cell !important;
            }
        </style>