CODEWITHSUNDEEP
jqueryhtmlajaxperformancehtml-table
Виктор Новиков
Виктор Новиков

Reputation: 291

HTML. JQuery. Tables with 4 000 rows and more

I try to create table with 4000 > rows and 18 columns. This table show parsed pages of my site. I really need show it all on one page because of:

  1. I need use filter in table
  2. I need use sorting in table on more than 5 columns

Each cell in table have one <a href element, because I use Bootstrap x editable. Bootstrap x editable allow edit each cell in table. Yes, I need edit table without reloading page.

My problem - it's really slow page loading. How do I optimize loading? I mean browser load table really slow. (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>

Upvotes: 0

Views: 875

Answers (2)

Bhalchandra K
Bhalchandra K

Reputation: 2681

Table with more than 4000 rows will not fit on user screen, it will require scrolling to see all the data. So in this case data can be loaded incrementally using scrollable pagination (like Facebook posts). But in your case you do not have to wait for user to perform scroll and then load data. Instead you can trigger recursive AJAX GET call to get table rows and keep appending to table. If you use Asynchronous AJAX GET, user will not be blocked and can continue using the loaded cell data while next data is loading. You can show some progress indicator till all data is loaded.

There are some limitation with IE 8/9 browsers which even does not render table if it has these number of rows ( Number of rows IE renders depends on client hardware configuration as well. My observation was with 2GB RAM it was able to render around 5K of rows but after that it breaks the table layout randomly and then renders the rows)

So using AJAX GET call will also fix these browser specific issues as well.

There are lot of open source jquery plugins you can use for this. One of the plugin I like is Here. If you do google for scrollable pagination you will get done of information on other available plugins.

Upvotes: 1

Joshua Wilson
Joshua Wilson

Reputation: 2526

I would recommend something like Backbone.js as an MVC for the UI. It will handle the data and allow you to sort.

Upvotes: 1

Related Questions