社区首页 >专栏 >Power BI表格高级交互：分页浏览

Power BI表格高级交互：分页浏览

wujunmin

发布于 2025-04-02 02:48:46

6000

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

当行数较多时，Power BI内置表格只能滚动条向下浏览。借助HTML，我们可以实现分页浏览。下图右下角显示了页码，点击任意数字即可跳转：

实现过程仅需一个度量值，将度量值中的维度、指标替换为你模型中的数据，然后放入HTML Content视觉对象使用。度量值默认一页显示10行，你也可以进行自定义。

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 = '&laquo;';
            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 = '&raquo;';
            nextLink.addEventListener('click', (e) => {
                e.preventDefault();
                showPage(page + 1);
            });
            paginationDiv.appendChild(nextLink);
        }
    }
    
    showPage(1);
}
setTimeout(paginateTable, 100);
</script>
</body>"