我尝试创建具有 4000 > 行和 18 列的表。此表显示我网站的已解析页面。我真的需要在一页上显示它，因为：
- 我需要在表格中使用过滤器
- 我需要在超过 5 列的表格中使用排序
表格中的每个单元格都有一个<a href元素，因为我使用Bootstrap x editable。Bootstrap x editable 允许编辑表格中的每个单元格。是的，我需要编辑表格而不重新加载页面。
我的问题 - 页面加载速度真的很慢。如何优化加载？我的意思是浏览器加载表真的很慢。（火狐Ubuntu）
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.5/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.5/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<div style="padding-left: 100px; padding-right: 60px">
<?php echo $menu; ?>
<table id="rows" class="table table-bordered table-condensed table-hover">
<thead>
<td colspan="18" style="padding: 10px">
Filter:
<form method="get" action="">
<input style="margin-top: 10px;" type="text" id="url" name="url" value="<?php echo $filter; ?>" placeholder="http://yourdomain.com"/>
<input class="btn" type="submit" name="filter" value="Filter it"/>
</form>
</td>
</thead>
<thead>
<tr>
<th></th>
<th id="sortme">
<a href="wordstat/index?field=query&type=up<?php if($filter):?>&url=<?php echo $filter; ?><?php endif; ?>">
Query
<i class="icon-chevron-up"></i>
</a>
</th>
<th>
<a href="wordstat/index?field=query&type=up<?php if($filter):?>&url=<?php echo $filter; ?><?php endif; ?>">
Snippet
<i class="icon-chevron-up"></i>
</a>
</th>
<th>
<a href="wordstat/index?field=query&type=up<?php if($filter):?>&url=<?php echo $filter; ?><?php endif; ?>">
Ancor
<i class="icon-chevron-up"></i>
</a>
</th>
<!-- AND MORE THAN 15 ALSO -->
</tr>
</thead>
<?php foreach($wordstat as $stat): ?>
<tr class="data">
<td class="editable">
<a href="#" data-pk="<?php echo $stat['id']; ?>" id="query" class="query">
<?php echo $stat['query']; ?>
</a>
</td>
<td class="editable">
<a href="#" data-pk="<?php echo $stat['id']; ?>" id="snippet">
<?php echo $stat['snippet']; ?>
</a>
</td>
<td class="editable">
<a href="#" data-pk="<?php echo $stat['id']; ?>" id="ancor">
<?php echo $stat['ancor']; ?>
</a>
</td>
<!-- AND MORE THAN 15 ALSO -->
</tr>
<?php endforeach; ?>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('.editable [id]').editable({
mode: 'inline',
type: 'text',
placement: 'top',
url: 'wordstat/update_cell',
title: 'Редактирование поля',
params: {token: get_token()}
});
$("#detect_rel").click(function(){
$('.data').each(function(i, el) {
var query = $(el).children('.editable').children('.query').text();
var page = $(el).children('.editable').children('.page_prodvigaemaya').text();
var id = $(el).children('td').children('a').attr('item_id');
$.ajax({
//async: false,
//async blockin browser...
url: 'wordstat/ajax?query='+query+'&page='+page+'&id='+id,
beforeSend: function(){
$(el).css('background','lavender')
$(el).children('.editable').children('.relevantnost').html("Ожидает данные. . .")
},
success: function(data){
$(el).css('background','none')
$(el).children('.editable').children('.relevantnost').html(data)
}
});
});
});
});
</script>
</div>