<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xie_lvli 表数据查看</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            padding: 20px;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            background: linear-gradient(to right, #4CAF50, #2E7D32);
            color: white;
            padding: 25px 30px;
        }
        
        h1 {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .database-info {
            background-color: rgba(255, 255, 255, 0.2);
            padding: 12px 18px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 0.95rem;
        }
        
        .database-info p {
            margin: 5px 0;
        }
        
        .main-content {
            padding: 25px;
        }
        
        .info-box {
            background-color: #e8f5e9;
            border-left: 5px solid #4CAF50;
            padding: 18px;
            margin-bottom: 25px;
            border-radius: 5px;
        }
        
        .success-message {
            color: #2E7D32;
            font-weight: bold;
            font-size: 18px;
            padding: 15px;
            background-color: #e8f5e9;
            border-radius: 6px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .error-message {
            color: #c62828;
            padding: 15px;
            background-color: #ffebee;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 5px solid #c62828;
        }
        
        /* 表格样式 */
        .table-container {
            margin-top: 20px;
            overflow-x: auto;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            min-width: 100%;
        }
        
        .data-table thead {
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        .data-table th {
            background-color: #4CAF50;
            color: white;
            padding: 15px 12px;
            text-align: left;
            font-weight: 600;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
            position: relative;
        }
        
        .data-table th:last-child {
            border-right: none;
        }
        
        .data-table th:hover {
            background-color: #3d8b40;
        }
        
        .data-table td {
            border: 1px solid #e0e0e0;
            padding: 12px;
            vertical-align: top;
            word-break: break-word;
            max-width: 300px;
        }
        
        .data-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .data-table tr:hover {
            background-color: #e8f5e9;
        }
        
        .data-table tr:hover td {
            background-color: #e8f5e9;
        }
        
        .data-table .row-number {
            background-color: #f1f1f1;
            font-weight: bold;
            text-align: center;
            color: #555;
            width: 60px;
            min-width: 60px;
        }
        
        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 25px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .pagination-info {
            color: #555;
            font-size: 0.95rem;
        }
        
        .pagination-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .page-btn {
            padding: 8px 14px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            color: #333;
            text-decoration: none;
            transition: all 0.2s ease;
            font-size: 0.9rem;
        }
        
        .page-btn:hover {
            background-color: #f1f1f1;
            border-color: #bbb;
        }
        
        .page-btn.active {
            background-color: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-btn.disabled:hover {
            background-color: white;
            border-color: #ddd;
        }
        
        /* 操作按钮样式 */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 30px;
            padding-top: 25px;
            border-top: 1px solid #e0e0e0;
            flex-wrap: wrap;
        }
        
        .action-btn {
            padding: 12px 25px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .action-btn:hover {
            background-color: #3d8b40;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .action-btn.secondary {
            background-color: #757575;
        }
        
        .action-btn.secondary:hover {
            background-color: #616161;
        }
        
        .action-btn.refresh {
            background-color: #2196F3;
        }
        
        .action-btn.refresh:hover {
            background-color: #0b7dda;
        }
        
        /* 长文本处理样式 */
        .long-text {
            max-height: 60px;
            overflow: hidden;
            position: relative;
        }
        
        .long-text.expanded {
            max-height: none;
        }
        
        .expand-btn {
            color: #2196F3;
            background: none;
            border: none;
            cursor: pointer;
            padding: 2px 5px;
            font-size: 12px;
            margin-top: 5px;
            display: inline-block;
        }
        
        .expand-btn:hover {
            text-decoration: underline;
        }
        
        /* 搜索和过滤 */
        .search-filter {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        
        .filter-group {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: flex-end;
        }
        
        .filter-item {
            flex: 1;
            min-width: 200px;
        }
        
        .filter-item label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }
        
        .filter-item input,
        .filter-item select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .filter-item button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .filter-item button:hover {
            background-color: #3d8b40;
        }
        
        /* 表格操作栏 */
        .table-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .table-stats {
            color: #666;
            font-size: 0.9rem;
        }
        
        .export-options {
            display: flex;
            gap: 10px;
        }
        
        .export-btn {
            padding: 8px 16px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
        }
        
        .export-btn:hover {
            background-color: #0b7dda;
        }
        
        .export-btn.csv {
            background-color: #FF9800;
        }
        
        .export-btn.csv:hover {
            background-color: #e68900;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                border-radius: 5px;
            }
            
            header {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.6rem;
            }
            
            .data-table {
                font-size: 12px;
            }
            
            .data-table th,
            .data-table td {
                padding: 8px 6px;
            }
            
            .data-table .row-number {
                width: 40px;
                min-width: 40px;
            }
            
            .pagination {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            
            .pagination-controls {
                justify-content: center;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            .action-btn {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>xie_履历 表数据查看</h1>
            <p class="subtitle">表格视图 - 显示 lvli_id > 0 的所有记录</p>
            <div class="database-info">
                <p><strong>数据库:</strong> xie33_db | <strong>表名:</strong> xie_lvli</p>
                <p><strong>查询条件:</strong> lvli_id > 0 | <strong>排序:</strong> lvli_id 升序</p>
            </div>
        </header>
        
        <div class="main-content">
            <div class="success-message"><span>✅ 找到 1 条记录</span><span>当前显示: 第 1 页 / 共 1 页 (每页 50 条)</span></div>                    
                    <!-- 表格操作栏 -->
                    <div class="table-actions">
                        <div class="table-stats">
                            当前页显示 1 条记录，共 26 个字段
                        </div>
                        <div class="export-options">
                            <button class="export-btn" onclick="exportToCSV()">导出为CSV</button>
                       <br>     <button class="export-btn csv" onclick="printTable()">打印表格</button>
                        </div>
                    </div>
                    
                    <!-- 表格容器 -->
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th class="row-number">#</th>
                                    <th title="lvli_id">lvli_id</th><th title="title">title</th><th title="date">date</th><th title="brithday">brithday</th><th title="content">content</th><th title="excerpt">excerpt</th><th title="cover">cover</th><th title="alias">alias</th><th title="author">author</th><th title="sortid">sortid</th><th title="type">type</th><th title="views">views</th><th title="comnum">comnum</th><th title="like_count">like_count</th><th title="attnum">attnum</th><th title="top">top</th><th title="sortop">sortop</th><th title="hide">hide</th><th title="checked">checked</th><th title="allow_remark">allow_remark</th><th title="password">password</th><th title="template">template</th><th title="tags">tags</th><th title="link">link</th><th title="feedback">feedback</th><th title="parent_id">parent_id</th>                                </tr>
                            </thead>
                            <tbody>
                                <tr><td class="row-number">1</td><td>17</td><td>谢</td><td>0</td><td>2012-12-12</td><td>试用</td><td>无</td><td>无</td><td></td><td>1</td><td>-1</td><td>blog</td><td>0</td><td>0</td><td>0</td><td>0</td><td>n</td><td>n</td><td>n</td><td>y</td><td>y</td><td></td><td></td><td><span style="color:#999;font-style:italic;">NULL</span></td><td></td><td></td><td>0</td></tr>                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页控件 -->
                                        
                    <div class="action-buttons">
                        <a href="/index.php" class="action-btn secondary">
                            <span>🏠</span> 返回主页面
                        </a>
                        <button class="action-btn refresh" onclick="location.reload()">
                            <span>🔄</span> 刷新数据
                        </button>
                        <a href="show_fields.php?table=xie_lvli" class="action-btn">
                            <span>📋</span> 查看表结构
                        </a>
                    </div>
                            </div>
    </div>
    
    <script>
        // 切换长文本的展开/收起
        function toggleExpand(button) {
            const row = button.parentElement;
            const longText = row.querySelector('.long-text');
            const fullText = row.querySelector('.full-text');
            
            if (longText.style.display === 'none') {
                longText.style.display = 'block';
                fullText.style.display = 'none';
                button.textContent = '显示完整内容';
            } else {
                longText.style.display = 'none';
                fullText.style.display = 'block';
                button.textContent = '收起内容';
            }
        }
        
        // 更改每页显示数量
        function changeLimit(limit) {
            const url = new URL(window.location.href);
            url.searchParams.set('limit', limit);
            url.searchParams.set('page', 1); // 回到第一页
            window.location.href = url.toString();
        }
        
        // 导出为CSV
        function exportToCSV() {
            // 获取表头
            const headers = [];
            document.querySelectorAll('.data-table th').forEach(th => {
                if (!th.classList.contains('row-number')) {
                    headers.push(th.textContent || th.innerText);
                }
            });
            
            // 获取数据行
            const rows = [];
            document.querySelectorAll('.data-table tbody tr').forEach(tr => {
                const row = [];
                tr.querySelectorAll('td').forEach((td, index) => {
                    // 跳过行号列
                    if (index > 0) {
                        let cellText = td.textContent || td.innerText;
                        // 移除展开按钮文本
                        cellText = cellText.replace(/显示完整内容|收起内容/g, '').trim();
                        // 处理CSV中的特殊字符
                        if (cellText.includes(',') || cellText.includes('"') || cellText.includes('\n')) {
                            cellText = '"' + cellText.replace(/"/g, '""') + '"';
                        }
                        row.push(cellText);
                    }
                });
                rows.push(row.join(','));
            });
            
            // 构建CSV内容
            const csvContent = [headers.join(','), ...rows].join('\n');
            
            // 创建下载链接
            const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'xie_lvli_data_page_' + 1 + '.csv';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
        
        // 打印表格
        function printTable() {
            const originalContent = document.body.innerHTML;
            const printContent = document.querySelector('.table-container').innerHTML;
            
            document.body.innerHTML = `
                <html>
                <head>
                    <title>打印表格 - xie_lvli 表数据</title>
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        table { width: 100%; border-collapse: collapse; font-size: 12px; }
                        th { background-color: #f2f2f2; border: 1px solid #ddd; padding: 8px; text-align: left; }
                        td { border: 1px solid #ddd; padding: 8px; vertical-align: top; }
                        tr:nth-child(even) { background-color: #f9f9f9; }
                        .print-header { text-align: center; margin-bottom: 20px; }
                        .print-footer { text-align: center; margin-top: 20px; font-size: 12px; color: #666; }
                        @media print {
                            @page { size: landscape; }
                        }
                    </style>
                </head>
                <body>
                    <div class="print-header">
                        <h2>xie_lvli 表数据 - 第 1 页</h2>
                        <p>生成时间: ${new Date().toLocaleString()}</p>
                        <p>查询条件: lvli_id > 0</p>
                    </div>
                    ${printContent}
                    <div class="print-footer">
                        <p>共 1 条记录，第 1 页 / 共 1 页</p>
                    </div>
                </body>
                </html>
            `;
            
            window.print();
            document.body.innerHTML = originalContent;
            location.reload();
        }
        
        // 页面加载完成后添加一些交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为表头添加排序提示
            const headers = document.querySelectorAll('.data-table th');
            headers.forEach((header, index) => {
                if (index > 0) { // 跳过行号列
                    header.title = '点击可按此字段排序';
                    header.style.cursor = 'pointer';
                    header.addEventListener('click', function() {
                        alert('排序功能需要后端实现。当前排序为 lvli_id 升序。');
                    });
                }
            });
            
            // 为表格行添加点击效果
            const tableRows = document.querySelectorAll('.data-table tbody tr');
            tableRows.forEach(row => {
                row.addEventListener('click', function() {
                    this.classList.toggle('selected');
                });
            });
        });
    </script>
</body>
</html>