数据表-DOM新添加的行中断了移动浏览器

Question

我正在使用数据表来显示行集，该行集具有一些展开按钮（带有图标“ fas fa-angle-right”的详细信息控制类），如下所示，

这在桌面视图中扩展为如下所示，但是由于某种未知的原因在移动视图中中断了。

这在台式机的Chrome视口中可以正常使用，但是，如果我减小视口的比例，它将停止工作（我在console.log中也看不到任何错误）

请参见下文，了解视口在移动视图中不起作用

我通过AJAX添加新行数据的编码如下

<script type="text/javascript">        
            $(document).ready(function() {
                var datatable = $("#datatable_list").DataTable({
                    serverSide: true,
                    responsive: true,
                    ajax: {
                        url: "/users/",
                        method: "POST"
                    },
                    pageLength: 50,
                    lengthChange: false,
                    order: [[1, "desc"]],
                    dom: '<"pull-left"if><"top pull-right"p>rt<"bottom pull-right"p><"clear">',    
                    createdRow: function( row, data, dataIndex ) {
                        //Add common class
                        $(row).addClass("mode");   
                        $(row).attr("id","user_"+data.user_id);
                        // Set the data-status attribute, and add a class

                            if(data.mode == "active"){    
                                $(row).addClass("table-success");    
                            }else if(data.mode == "pending"){
                                $(row).addClass("table-warning");    
                            }
                            else if(data.mode == "deleted"){
                                $(row).addClass("table-danger");    
                            }else if(data.mode == "hellban"){
                                $(row).addClass("mode-hellban");    
                            }
                            else if( data.mode == "suspended"){
                                $(row).addClass("mode-suspended");    
                            }else if( data.mode== "disapproved" ){
                                $(row).addClass("mode-disapproved");    
                            }else if( data.mode== "hidden" ){
                                $(row).addClass("mode-hidden");    
                            }

                    },
                    columns: [
                        {
                            "className":      "details-control",
                            "orderable":      false,
                            "data":           null,
                            "defaultContent": '<button class="btn btn-md btn-round btn-outline-secondary btn-just-icon more-info-expand"><i class="fas fa-angle-right"></i></a>'
                        },
                        {data: "user_id", searchable: false},
                        {data: "name"},
                        {data: "birth", 
                            "render": 
                                function(data, type, row) { 
                                    return getAge(row.birth);
                                }
                        },
                        {data: "mode"},
                        {data: "gender"},
                        {data: "mail"},
                        {data: "country_title"},
                        {"type": "date", data: "last_visit", searchable: false},
                        {"type": "html", data: null , "render": function(data, type, row) {return '<button class="btn btn-md btn-primary btn-outline-secondary btn-round btn-just-icon rlogin"><i class="fas fa-chess-knight"></i></button>'} }
                    ]
                });
                // Edit record
                $("#datatable_div").on("click", ".edit", function() {
                     var rowData = datatable.row( $(this).parents('tr')).data();
                });
                //More details record

                // Add event listener for opening and closing details
               /**/ 
               $("#datatable_list tbody").on("click", "td.details-control", function () {
                    var tr = $(this).closest("tr");
                    var row = datatable.row( tr );
                    if ( row.child.isShown() ) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass("shown");
                        $(this).html('<button class="btn btn-md btn-round btn-outline-secondary btn-just-icon"><i class="fas fa-angle-right"></i></a>');
                    }
                    else {
                        getUserProfile(row.data().user_id);
                        $(this).html('<button class="btn btn-md btn-round btn-outline-secondary btn-just-icon"><i class="fas fa-angle-down"></i></a>');
                        // Open this row
                        row.child( format(row.data()) ).show();
                        tr.addClass("shown");
                    }
                } );

            });
        </script>

Answer 1

我将以此为答案，因为我设法对问题做出了明智的猜测；-）

我认为正是“响应式”扩展引起了问题，从而重组了表和/或类。事实证明这是真的。

我看到两种解决方案：

• 删除responsive: true并向表中手动添加一些响应类
• 使用扩展名提供的选项优先安排重组的方式。有关here的更多信息。