Как полностью отобразить данные Pandas в HTML: руководство

import pandas as pd
import numpy as np

# Создаём тестовый DataFrame с 1000 строками и 20 столбцами
df = pd.DataFrame(np.random.rand(1000, 20), 
columns=[f'feature_{i}' for i in range(20)])

print(df) # Результат будет усечён

feature_0 feature_1 ... feature_18 feature_19
0 0.462096 0.594895 ... 0.262832 0.951031
1 0.979209 0.348595 ... 0.579204 0.057184
... ... ... ... ... ...
998 0.042191 0.463323 ... 0.367659 0.402389
999 0.116259 0.079889 ... 0.706281 0.846586

[1000 rows x 20 columns]

# Максимальное количество строк для отображения
pd.set_option('display.max_rows', None)

# Максимальное количество столбцов для отображения
pd.set_option('display.max_columns', None)

# Ширина каждого столбца (в символах)
pd.set_option('display.width', 1000)

# Максимальное количество символов для отображения в ячейке
pd.set_option('display.max_colwidth', None)

def set_display_profile(profile='default'):
if profile == 'full':
pd.set_option('display.max_rows', None)
pd.set_option('display.max_columns', None)
pd.set_option('display.width', 1000)
pd.set_option('display.max_colwidth', None)
elif profile == 'compact':
pd.set_option('display.max_rows', 50)
pd.set_option('display.max_columns', 20)
pd.set_option('display.width', 120)
pd.set_option('display.max_colwidth', 30)
else: # default
pd.reset_option('display.max_rows')
pd.reset_option('display.max_columns')
pd.reset_option('display.width')
pd.reset_option('display.max_colwidth')

# Использование
set_display_profile('full') # Для максимально детального просмотра

# Создаём тестовый DataFrame
import pandas as pd
import numpy as np

df = pd.DataFrame({
'A': np.random.rand(100),
'B': np.random.choice(['X', 'Y', 'Z'], 100),
'C': np.random.randint(1, 100, 100),
'D': [f'Text-{i}' * 5 for i in range(100)]
})

# Простое преобразование в HTML
html_table = df.to_html()

# Сохранение в файл
with open('data_table.html', 'w') as f:
f.write(html_table)

# Полное отображение без усечения
html_table_full = df.to_html(
index=True,
max_rows=None,
max_cols=None,
escape=False,
na_rep='N/A',
render_links=True
)

# Настраиваем глобальные параметры
pd.set_option('display.max_rows', None)
pd.set_option('display.max_columns', None)
pd.set_option('display.max_colwidth', None)

# Генерируем HTML с дополнительными параметрами
html = df.to_html(
classes='table table-striped table-hover', # Bootstrap-классы
border=0,
index=True,
justify='left', # Выравнивание текста
notebook=False, # Оптимизация для веб, а не для Jupyter
render_links=True,
escape=False
)

# Добавляем дополнительную обработку, например, кнопки для экспорта
html_with_buttons = f"""
<div class="table-container">
<div class="export-buttons">
<button onclick="exportToCSV()">Export to CSV</button>
<button onclick="exportToExcel()">Export to Excel</button>
</div>
{html}
</div>
<script>
function exportToCSV() {{ /* JavaScript код */ }}
function exportToExcel() {{ /* JavaScript код */ }}
</script>
"""

def paginated_html(df, rows_per_page=100):
total_rows = len(df)
pages = []

for start in range(0, total_rows, rows_per_page):
end = min(start + rows_per_page, total_rows)
page_html = df.iloc[start:end].to_html(
max_rows=None,
max_cols=None,
escape=False
)
pages.append(page_html)

# Создаём HTML с пагинацией
result = """
<div class="paginated-table">
<div class="pagination-controls">
<button id="prev-page" disabled>Previous</button>
<span id="page-indicator">Page 1 of {}</span>
<button id="next-page">Next</button>
</div>
<div class="table-container" id="table-container">
{}
</div>
</div>
<script>
// JavaScript для переключения страниц
const pages = {};
let currentPage = 0;

function showPage(index) {{
document.getElementById('table-container').innerHTML = pages[index];
document.getElementById('page-indicator').textContent = `Page ${{index + 1}} of ${{pages.length}}`;
document.getElementById('prev-page').disabled = index === 0;
document.getElementById('next-page').disabled = index === pages.length – 1;
currentPage = index;
}}

document.getElementById('prev-page').addEventListener('click', () => {{
if (currentPage > 0) showPage(currentPage – 1);
}});

document.getElementById('next-page').addEventListener('click', () => {{
if (currentPage < pages.length – 1) showPage(currentPage + 1);
}});

// Инициализация
showPage(0);
</script>
""".format(len(pages), pages[0], pages)

return result

# Создаём стилизованную версию таблицы
styled_df = df.style.background_gradient(cmap='viridis', subset=['A', 'C'])

# Экспортируем в HTML
styled_html = styled_df.to_html()

def style_dataframe(df):
# Создаём базовый стиль
styled = df.style.background_gradient(
cmap='coolwarm', 
subset=['A', 'C'],
vmin=0, 
vmax=100
)

# Добавляем форматирование чисел
styled = styled.format({
'A': '{:.2f}',
'C': '{:d}'
})

# Выделяем определённые значения
styled = styled.highlight_max(color='lightgreen', axis=0)
styled = styled.highlight_min(color='lightcoral', axis=0)

# Применяем чередование строк и другие CSS-стили
styled = styled.set_table_styles([
{'selector': 'tr:nth-child(even)', 'props': 'background-color: #f2f2f2;'},
{'selector': 'th', 'props': 'background-color: #4CAF50; color: white; position: sticky; top: 0; z-index: 1;'},
{'selector': 'td', 'props': 'text-align: right; padding: 8px;'},
{'selector': 'caption', 'props': 'caption-side: bottom; font-style: italic;'},
{'selector': 'table', 'props': 'border-collapse: collapse; width: 100%; font-size: 14px;'},
])

# Добавляем подпись к таблице
styled = styled.set_caption("Подробный анализ данных")

# Применяем пользовательские CSS-классы
styled = styled.set_table_attributes('class="dataframe table-responsive"')

return styled

# Применяем стилизацию и экспортируем в HTML
styled_html = style_dataframe(df).to_html()

# Дополняем HTML дополнительными скриптами для интерактивности
final_html = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Детальный анализ данных</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<style>
.dataframe {{
max-height: 80vh;
overflow-y: auto;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}}
.table-container {{
padding: 20px;
max-width: 95%;
margin: 0 auto;
}}
.search-box {{
margin-bottom: 15px;
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}}
</style>
</head>
<body>
<div class="table-container">
<h1>Полный анализ данных</h1>
<input type="text" id="searchBox" class="search-box" placeholder="Поиск по таблице...">
{styled_html}
</div>
<script>
// Простой скрипт для поиска по таблице
$(document).ready(function() {{
$("#searchBox").on("keyup", function() {{
var value = $(this).val().toLowerCase();
$(".dataframe tbody tr").filter(function() {{
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
}});
}});
}});
</script>
</body>
</html>
"""

# Сохраняем полный HTML в файл
with open('styled_data_analysis.html', 'w', encoding='utf-8') as f:
f.write(final_html)

def export_to_datatables(df, filename='interactive_table.html'):
"""Экспортирует DataFrame в интерактивную HTML-таблицу с использованием DataTables"""

# Генерируем базовую HTML-таблицу без стилей (они будут добавлены DataTables)
basic_table = df.to_html(classes='display', index=True, table_id='data_table')

# Создаём полный HTML-документ с интеграцией DataTables
html_content = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Data Table</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>
<style>
body {{ font-family: Arial, sans-serif; margin: 20px; }}
.container {{ max-width: 1200px; margin: 0 auto; }}
h1 {{ color: #333; text-align: center; }}
#data_table_wrapper {{ margin-top: 30px; }}
.dataTables_filter {{ margin-bottom: 15px; }}
</style>
</head>
<body>
<div class="container">
<h1>Interactive Data Analysis</h1>
{basic_table}
</div>
<script>
$(document).ready(function() {{
$('#data_table').DataTable({{
pageLength: 25,
scrollX: true,
scrollY: '60vh',
scrollCollapse: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel'
],
fixedHeader: true,
responsive: true
}});
}});
</script>
</body>
</html>
"""

# Сохраняем в файл
with open(filename, 'w', encoding='utf-8') as f:
f.write(html_content)

return f"Интерактивная таблица сохранена в {filename}"

# Функция для эффективной обработки больших DataFrame для HTML-отображения
def optimize_df_for_html(df, max_size_mb=50):
"""
Оптимизирует DataFrame для HTML-отображения, учитывая ограничения размера

Параметры:
df (DataFrame): Исходный DataFrame для оптимизации
max_size_mb (int): Максимальный размер результата в МБ

Возвращает:
DataFrame: Оптимизированный DataFrame
"""
import sys

# Оцениваем текущий размер DataFrame в памяти
current_size_mb = df.memory_usage(deep=True).sum() / (1024 * 1024)
print(f"Текущий размер DataFrame: {current_size_mb:.2f} МБ")

# Если DataFrame уже меньше порогового значения, возвращаем его как есть
if current_size_mb <= max_size_mb:
return df

# Шаг 1: Оптимизация типов данных
for col in df.select_dtypes(include=['int']).columns:
# Определяем минимальный целочисленный тип для колонки
col_min, col_max = df[col].min(), df[col].max()

if col_min >= 0: # Только положительные числа
if col_max < 2**8:
df[col] = df[col].astype('uint8')
elif col_max < 2**16:
df[col] = df[col].astype('uint16')
elif col_max < 2**32:
df[col] = df[col].astype('uint32')
else: # Положительные и отрицательные числа
if col_min > -2**7 and col_max < 2**7:
df[col] = df[col].astype('int8')
elif col_min > -2**15 and col_max < 2**15:
df[col] = df[col].astype('int16')
elif col_min > -2**31 and col_max < 2**31:
df[col] = df[col].astype('int32')

# Для float оптимизируем до float32, если это возможно
for col in df.select_dtypes(include=['float']).columns:
df[col] = df[col].astype('float32')

# Для строк используем категориальные типы там, где это имеет смысл
for col in df.select_dtypes(include=['object']).columns:
if df[col].nunique() / len(df) < 0.5: # Если уникальных значений меньше 50% от общего количества
df[col] = df[col].astype('category')

# Проверяем результат оптимизации типов
optimized_size_mb = df.memory_usage(deep=True).sum() / (1024 * 1024)
print(f"Размер после оптимизации типов: {optimized_size_mb:.2f} МБ")

# Шаг 2: Если оптимизация типов недостаточна, применяем выборку строк и столбцов
if optimized_size_mb > max_size_mb:
# Вычисляем, сколько строк и столбцов можем оставить
reduction_factor = max_size_mb / optimized_size_mb

# Приоритизируем столбцы (можем выбрать наиболее важные)
# Например, оставляем столбцы с наибольшей дисперсией
if len(df.columns) > 5:
variances = df.var()
important_columns = variances.sort_values(ascending=False).index[:max(5, int(len(df.columns) * reduction_factor))]
df = df[important_columns]

# Сэмплируем строки, если это всё ещё необходимо
new_size_mb = df.memory_usage(deep=True).sum() / (1024 * 1024)
if new_size_mb > max_size_mb:
sample_size = int(len(df) * max_size_mb / new_size_mb)
df = df.sample(sample_size, random_state=42)

final_size_mb = df.memory_usage(deep=True).sum() / (1024 * 1024)
print(f"Финальный размер DataFrame: {final_size_mb:.2f} МБ")

return df

def create_virtual_scrolling_table(df, filename='virtual_table.html'):
"""Создаёт HTML с виртуальным скроллингом для большой таблицы"""

# Преобразуем DataFrame в JSON для передачи в JavaScript
import json
data_json = df.to_json(orient='records')

# Получаем заголовки столбцов
columns = list(df.columns)

# Создаём HTML с JavaScript-кодом для виртуального скроллинга
html_content = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Virtual Scrolling Table</title>
<style>
body {{ font-family: Arial, sans-serif; margin: 0; padding: 20px; }}
.container {{ max-width: 1200px; margin: 0 auto; }}
.virtual-table-container {{ 
height: 600px; 
overflow: auto;
position: relative;
border: 1px solid #ddd;
}}
.table-header {{ 
position: sticky;
top: 0;
background: #f8f9fa;
z-index: 10;
border-bottom: 2px solid #dee2e6;
}}
.table-header-cell {{
display: inline-block;
padding: 12px 15px;
font-weight: bold;
box-sizing: border-box;
border-right: 1px solid #dee2e6;
}}
.virtual-row {{
position: absolute;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #dee2e6;
}}
.row-cell {{
display: inline-block;
padding: 8px 15px;
box-sizing: border-box;
border-right: 1px solid #dee2e6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
.row-even {{ background-color: #f2f2f2; }}
.loading-indicator {{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: none;
}}
</style>
</head>
<body>
<div class="container">
<h1>Большая таблица данных с виртуальным скроллингом</h1>
<p>Эта таблица эффективно отображает все {len(df)} строк данных, загружая только видимые в данный момент.</p>

<div class="virtual-table-container" id="tableContainer">
<div class="table-header" id="tableHeader"></div>
<div class="loading-indicator" id="loadingIndicator">Загрузка данных...</div>
<div id="virtualRows"></div>
</div>
</div>

<script>
// Данные таблицы
const tableData = {data_json};
const columns = {json.dumps(columns)};

// Конфигурация виртуального скроллинга
const rowHeight = 40; // Высота строки в пикселях
const bufferSize = 10; // Количество дополнительных строк для рендеринга
let visibleRowsCount = 0; // Количество видимых строк

// Элементы DOM
const container = document.getElementById('tableContainer');
const header = document.getElementById('tableHeader');
const virtualRows = document.getElementById('virtualRows');
const loadingIndicator = document.getElementById('loadingIndicator');

// Инициализация заголовка таблицы
function initHeader() {{
const cellWidth = `${{100 / columns.length}}%`;
columns.forEach(column => {{
const headerCell = document.createElement('div');
headerCell.className = 'table-header-cell';
headerCell.style.width = cellWidth;
headerCell.textContent = column;
header.appendChild(headerCell);
}});
}}

// Рендеринг видимых строк
function renderVisibleRows() {{
const scrollTop = container.scrollTop;
const containerHeight = container.clientHeight;

const startIndex = Math.floor(scrollTop / rowHeight) – bufferSize;
const endIndex = Math.ceil((scrollTop + containerHeight) / rowHeight) + bufferSize;

const adjustedStartIndex = Math.max(0, startIndex);
const adjustedEndIndex = Math.min(tableData.length – 1, endIndex);

// Устанавливаем высоту контейнера виртуальных строк
virtualRows.style.height = `${{tableData.length * rowHeight}}px`;

// Очищаем текущие строки
virtualRows.innerHTML = '';

// Рендерим только видимые строки
for (let i = adjustedStartIndex; i <= adjustedEndIndex; i++) {{
const rowData = tableData[i];
const row = document.createElement('div');
row.className = `virtual-row ${{i % 2 === 0 ? 'row-even' : ''}}`;
row.style.top = `${{i * rowHeight}}px`;
row.style.height = `${{rowHeight}}px`;

const cellWidth = `${{100 / columns.length}}%`;

columns.forEach(column => {{
const cell = document.createElement('div');
cell.className = 'row-cell';
cell.style.width = cellWidth;
cell.textContent = rowData[column] !== null ? rowData[column].toString() : 'N/A';
row.appendChild(cell);
}});

virtualRows.appendChild(row);
}}
}}

// Обработчик скролла
function handleScroll() {{
requestAnimationFrame(renderVisibleRows);
}}

// Инициализация таблицы
function initVirtualTable() {{
loadingIndicator.style.display = 'block';

// Вычисляем количество видимых строк
visibleRowsCount = Math.ceil(container.clientHeight / rowHeight);

// Инициализируем заголовок
initHeader();

// Рендерим начальные строки
setTimeout(() => {{
renderVisibleRows();
loadingIndicator.style.display = 'none';

// Добавляем обработчик скролла
container.addEventListener('scroll', handleScroll);
}}, 100);
}}

// Запускаем инициализацию при загрузке страницы
window.addEventListener('load', initVirtualTable);

// Обновляем при изменении размера окна
window.addEventListener('resize', () => {{
visibleRowsCount = Math.ceil(container.clientHeight / rowHeight);
renderVisibleRows();
}});
</script>
</body>
</html>
"""

# Сохраняем в файл
with open(filename, 'w', encoding='utf-8') as f:
f.write(html_content)

return f"Таблица с виртуальным скроллингом сохранена в {filename}"

# Серверная часть на Flask для ленивой загрузки данных
from flask import Flask, jsonify, render_template, request
import pandas as pd
import numpy as np

app = Flask(__name__)

# Создаём большой тестовый DataFrame (обычно это будут реальные данные из БД)
@app.route('/')
def index():
return render_template('lazy_loading_table.html')

@app.route('/api/data')
def get_data():
# Получаем параметры запроса
start = int(request.args.get('start', 0))
length = int(request.args.get('length', 50))

# Загружаем данные (здесь мы генерируем их, но обычно они будут из БД)
# В реальном приложении здесь будет запрос к базе данных
df = pd.DataFrame(np.random.rand(10000, 10), 
columns=[f'feature_{i}' for i in range(10)])

# Возвращаем только запрашиваемый фрагмент
result = df.iloc[start:start+length].to_dict(orient='records')

# Возвращаем также общее количество записей
return jsonify({
'data': result,
'total': len(df),
'start': start,
'length': length
})

if __name__ == '__main__':
app.run(debug=True)