admin管理员组文章数量:1033373
Power BI表格高级交互：分页浏览
当行数较多时，Power BI内置表格只能滚动条向下浏览。借助HTML，我们可以实现分页浏览。下图右下角显示了页码，点击任意数字即可跳转：
实现过程仅需一个度量值，将度量值中的维度、指标替换为你模型中的数据，然后放入HTML Content视觉对象使用。度量值默认一页显示10行，你也可以进行自定义。
代码语言：javascript代码运行次数：0运行复制HTML表格.分页 =
VAR t =
ADDCOLUMNS (
VALUES ( '表'[店铺名称] ),
"销售业绩", FORMAT ( [M.销售业绩], "#,#" ),
"销售折扣", FORMAT ( [M.销售折扣], "0.00" ),
"连带率", FORMAT ( [M.客单量], "0.00" ),
"客单价", FORMAT ( [M.客单价], "#,#" )
)
VAR HTML_Text =
CONCATENATEX (
t,
"<tr><td style='text-align:left'>" & [店铺名称] & "</td><td style='text-align:right'>" & [销售业绩] & "</td><td style='text-align:right'>" & [销售折扣] & "</td><td style='text-align:right'>" & [连带率] & "</td><td style='text-align:right'>" & [客单价] & "</td></tr>",
,[M.销售业绩],DESC
)
RETURN "
--公众号：wujunmin
<head>
<style>
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
background-color: #f2f2f2;
text-align: left;
padding: 8px;
}
td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
th:nth-child(1) {
text-align: left;
}
th:nth-child(n+2) {
text-align: right;
}
.pagination {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.pagination a {
color: black;
padding: 6px 12px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
</head>
<body>
<table id='pagedTable'>
<thead>
<tr>
<th>店铺名称</th>
<th>销售业绩</th>
<th>销售折扣</th>
<th>连带率</th>
<th>客单价</th>
</tr>
</thead>
<tbody>" &
HTML_Text & "
</tbody>
</table>
<div class='pagination' id='pagination'></div>
<script>
function paginateTable() {
const table = document.getElementById('pagedTable');
const rows = table.querySelectorAll('tbody tr');
const rowsPerPage = 10;
const pageCount = Math.ceil(rows.length / rowsPerPage);
const paginationDiv = document.getElementById('pagination');
let currentPage = 1;
function showPage(page) {
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
rows.forEach((row, index) => {
row.style.display = (index >= start && index < end) ? '' : 'none';
});
updatePaginationButtons(page);
}
function updatePaginationButtons(page) {
paginationDiv.innerHTML = '';
currentPage = page;
if (page > 1) {
const prevLink = document.createElement('a');
prevLink.href = '#';
prevLink.innerHTML = '«';
prevLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(page - 1);
});
paginationDiv.appendChild(prevLink);
}
for (let i = 1; i <= pageCount; i++) {
const pageLink = document.createElement('a');
pageLink.href = '#';
pageLink.textContent = i;
if (i === page) {
pageLink.className = 'active';
}
pageLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(i);
});
paginationDiv.appendChild(pageLink);
}
if (page < pageCount) {
const nextLink = document.createElement('a');
nextLink.href = '#';
nextLink.innerHTML = '»';
nextLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(page + 1);
});
paginationDiv.appendChild(nextLink);
}
}
showPage(1);
}
setTimeout(paginateTable, 100);
</script>
</body>"Power BI表格高级交互：分页浏览
当行数较多时，Power BI内置表格只能滚动条向下浏览。借助HTML，我们可以实现分页浏览。下图右下角显示了页码，点击任意数字即可跳转：
实现过程仅需一个度量值，将度量值中的维度、指标替换为你模型中的数据，然后放入HTML Content视觉对象使用。度量值默认一页显示10行，你也可以进行自定义。
代码语言：javascript代码运行次数：0运行复制HTML表格.分页 =
VAR t =
ADDCOLUMNS (
VALUES ( '表'[店铺名称] ),
"销售业绩", FORMAT ( [M.销售业绩], "#,#" ),
"销售折扣", FORMAT ( [M.销售折扣], "0.00" ),
"连带率", FORMAT ( [M.客单量], "0.00" ),
"客单价", FORMAT ( [M.客单价], "#,#" )
)
VAR HTML_Text =
CONCATENATEX (
t,
"<tr><td style='text-align:left'>" & [店铺名称] & "</td><td style='text-align:right'>" & [销售业绩] & "</td><td style='text-align:right'>" & [销售折扣] & "</td><td style='text-align:right'>" & [连带率] & "</td><td style='text-align:right'>" & [客单价] & "</td></tr>",
,[M.销售业绩],DESC
)
RETURN "
--公众号：wujunmin
<head>
<style>
table {
font-family: Arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
th {
background-color: #f2f2f2;
text-align: left;
padding: 8px;
}
td {
padding: 8px;
border-bottom: 1px solid #ddd;
}
th:nth-child(1) {
text-align: left;
}
th:nth-child(n+2) {
text-align: right;
}
.pagination {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.pagination a {
color: black;
padding: 6px 12px;
text-decoration: none;
border: 1px solid #ddd;
margin: 0 4px;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
</style>
</head>
<body>
<table id='pagedTable'>
<thead>
<tr>
<th>店铺名称</th>
<th>销售业绩</th>
<th>销售折扣</th>
<th>连带率</th>
<th>客单价</th>
</tr>
</thead>
<tbody>" &
HTML_Text & "
</tbody>
</table>
<div class='pagination' id='pagination'></div>
<script>
function paginateTable() {
const table = document.getElementById('pagedTable');
const rows = table.querySelectorAll('tbody tr');
const rowsPerPage = 10;
const pageCount = Math.ceil(rows.length / rowsPerPage);
const paginationDiv = document.getElementById('pagination');
let currentPage = 1;
function showPage(page) {
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
rows.forEach((row, index) => {
row.style.display = (index >= start && index < end) ? '' : 'none';
});
updatePaginationButtons(page);
}
function updatePaginationButtons(page) {
paginationDiv.innerHTML = '';
currentPage = page;
if (page > 1) {
const prevLink = document.createElement('a');
prevLink.href = '#';
prevLink.innerHTML = '«';
prevLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(page - 1);
});
paginationDiv.appendChild(prevLink);
}
for (let i = 1; i <= pageCount; i++) {
const pageLink = document.createElement('a');
pageLink.href = '#';
pageLink.textContent = i;
if (i === page) {
pageLink.className = 'active';
}
pageLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(i);
});
paginationDiv.appendChild(pageLink);
}
if (page < pageCount) {
const nextLink = document.createElement('a');
nextLink.href = '#';
nextLink.innerHTML = '»';
nextLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(page + 1);
});
paginationDiv.appendChild(nextLink);
}
}
showPage(1);
}
setTimeout(paginateTable, 100);
</script>
</body>"本文标签： Power BI表格高级交互分页浏览
版权声明：本文标题：Power BI表格高级交互：分页浏览 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748027356a2243427.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论