Я использую datatable для отображения набора строк, который имеет некоторую кнопку расширения (класс управления деталями со значком «fa 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>