metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
71 lines (64 loc) • 2.6 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test Table - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
<div class="container">
<h1>Table test page</h1>
<div class="example">
<table class="table table-border striped" id="elements_tbl"
data-role="table"
data-source="https://res.cloudinary.com/djle2rzyf/raw/upload/v1608546296/rolesmanagementData_eyncfj.json"
data-search-wrapper=".elements_search_wrapper"
data-info-wrapper=".elements_info"
data-pagination-wrapper=".elements_pagination_wrapper"
data-rows-wrapper=".elements_rows_wrapper"
data-table-search-title="جستجو:"
data-search-min-length="1"
data-search-fields
data-table-info-title=""
data-pagination-prev-title="قبلی"
data-pagination-next-title="بعدی"
data-rows="5"
data-rows-steps="5, 10"
data-table-rows-count-title="نمایش ردیف ها:"
data-all-records-title="همه"
data-inspector-title="تنظیم عرض ستون ها"
data-rownum="true"
data-rownum-title="ردیف"
data-filters
data-filters-operator="or"
data-view-save-mode="client"
data-horizontal-scroll="false"
data-cls='text-center'
>
<thead>
<tr>
<th class="sortable-column" data-sortable="true" data-sort-dir="asc">Name</th>
<th data-sortable="true">Office</th>
<th data-sortable="true" data-format="number">Age</th>
<th data-sortable="true" data-format="date">Start date</th>
<th data-sortable="true" data-show="false" data-format="money">Salary</th>
</tr>
</thead>
</table>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
function getStoredKeys(){
var keys = Metro.getPlugin("table", "table").getStoredKeys();
alert(keys.join("\n"));
}
// $(function () {
// $(".table").on("click", "tbody td", function(){
// alert(this.innerText)
// })
// })
</script>
</body>
</html>