Question

我尝试用4000创建表格＆gt;行和18列。此表显示我的网站的已解析页面。我真的需要在一个页面上显示所有内容，因为：

我需要在表格中使用过滤器
我需要在超过5列的表格中使用排序

表格中的每个单元格都有一个<a href元素，因为我使用 Bootstrap x editable 。 Bootstrap x editable允许编辑表格中的每个单元格。是的，我需要编辑表而不重新加载页面。

我的问题 - 这是非常慢的页面加载。如何优化加载？我的意思是浏览器加载表真的很慢。（Firefox 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:&nbsp;&nbsp;&nbsp;&nbsp;
            <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>

Answer 1

我会推荐像Backbone.js这样的UI作为MVC。它将处理数据并允许您进行排序。

Answer 2

超过4000行的表格不适合用户屏幕，需要滚动才能看到所有数据。因此，在这种情况下，可以使用可滚动分页（如Facebook帖子）逐步加载数据。但在您的情况下，您不必等待用户执行滚动然后加载数据。相反，您可以触发递归AJAX GET调用以获取表行并继续追加到表。如果使用异步AJAX GET，则不会阻止用户，并且可以在下载数据时继续使用加载的单元数据。您可以显示一些进度指示器，直到加载所有数据。

IE 8/9浏览器存在一些限制，如果它具有这些行数，甚至不会渲染表（IE渲染的行数也取决于客户端硬件配置。我的观察是使用2GB RAM它能够渲染大约5K的行，但之后它会随机打破表格布局，然后渲染行）

因此，使用AJAX GET调用也会修复这些浏览器特定问题。

你可以使用很多开源的jquery插件。我喜欢的插件之一是Here。如果您使用google进行可滚动分页，您将获得有关其他可用插件的信息。

HTML。 JQuery的。有4 000行以上的表格

2 个答案: