Jquery 数据 table 添加元标记后无法正常工作

Question

我有一个必须响应移动 phone 的网站。我已经使用我的桌面创建了它。当我调整浏览器 windows 时，它在移动设备 phone 上运行完美，但当我在我的真实移动设备上 phone 检查它时，它对移动设备视图没有响应。

在我添加以下行之后：

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

此 jsp 页面的元数据。
在我的网站响应移动 phone 之后。但是 jQuery 数据 table 添加此元标记后无法正常工作。所以我的问题是我如何同时处理两者？

这是我的数据table代码

      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);
                    }
                });
}

第一时间数据table 正确加载。当我调用 back-end 操作时，数据 table header 无法正确加载。拳头时间数据表.

当我在重新加载数据后向 back-end 提交值时 table header 未正确加载

我检查了检查元素然后我看到自动为 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>

我应该如何避免这种情况？

Answer 1

使用以下 class 样式在每次刷新页面时覆盖当前样式。

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

Jquery 数据 table 添加元标记后无法正常工作

Jquery data table not work properly after add meta tags

meta

jquery

datatables