When i’m trying to open page on iPad then tabulator doesn’t inits and showing. Even in a official site. Can anyone can help with this one? Thank you.
Try different versions of tabulator and js.
On Android devices it looks normal. Is there any trick to do it properly on iPad, because i wrote a project with Tabulator in its almost done. And today i’ve tried on iPad and was confused.
Thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<title>Таблицы Bootstrap во вкладках</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid" style="width: 100%; padding-top:55px; padding-left: 0px; padding-right: 0px; height: inherit">
<div id="UsersTableContainer" class="row-fluid" style="height: inherit"></div>
</div>
<script type="text/javascript">
var rowdata;
var table = new Tabulator("#UsersTableContainer", {
pagination:"local",
paginationSize:40,
paginationSizeSelector:[5, 15, 20, 30, 40, 50, 100, 200],
movableColumns:true,
paginationCounter:"rows",
resizableRows:true,
autoResize:true,
placeholder:"Нет данных",
layout:"fitColumns",
responsiveLayout:true,
selectableRows:true,
selectableRowsRangeMode:"click",
columns:[
{title:"username", field:"username",responsive:0, hozAlign:"left", width: 200, formatter:"textarea", headerFilter:"input"},
{title:"logon", field:"logon", hozAlign:"left",responsive:0, width: 200, formatter:"textarea", headerFilter:"input",},
{title:"post", field:"post", hozAlign:"left",responsive:0, width: 500, formatter:"textarea", headerFilter:"input"},
{title:"ord", field:"ord", hozAlign:"left", formatter:"textarea", headerFilter:"input", headerFilterPlaceholder:"..."},
{title:"visible", field:"visible", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
{title:"access", field:"access", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
{title:"deleted", field:"deleted", hozAlign:"center", formatter:"tickCross", headerFilter:"tickCross", headerFilterParams:{"tristate":true},headerFilterEmptyCheck:function(value){return value === null}},
{title:"ИД portal_id", field:"portal_id", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
{title:"list_id", field:"list_id", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
{title:"Users read", field:"count_users_read", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
{title:"Users write", field:"count_users_write", hozAlign:"left", formatter:"textarea", headerFilter:"input"},
],
});
</script>
</body>
</html>