Question

我有一个网站必须对手机具有响应能力。我已经在桌面上创建了它。当我调整浏览器窗口时，它可以完美地在手机上运行，但是当我在真正的手机上对其进行检查时，它对移动视图没有响应。

在我添加以下行之后：

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

此jsp页面的元数据。
在我的网站响应手机之后。但是添加此元标记后，jQuery数据表无法正常工作。所以我的问题是如何同时处理这两个问题？

这是我的数据表代码

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

第一时间数据表已正确加载。当我调用后端操作数据表时，表头无法正确加载。拳头时间数据表。

当我在重新加载数据表头后将值提交到后端时无法正确加载

我检查了检查元素，然后看到自动为标题设置了这种样式

<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

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

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

添加元标记后，jQuery数据表无法正常工作

1 个答案: