How do I load a HTML table sections at a time

I have a table that will rebuild async everytime a new option is selected from a dropdown. I am able to make the call and the HTML is generated correctly but when sending it back across the wire it breaks if the size is to large.

I was thinking a solution would be query sections of the table until all rows are returned by making seperate calls each time. Then I thought of how Twitter does their feeds and add more if the user scrolls to the bottom of the list.

Any suggestions?

Here is some Code examples of what I'm tring to do:

$('[id$=ddCorpIngredientClasses]').change(function () {

        callScriptMethod(
        'IngredientProperties.aspx/ReBuildCorpIngredientTable',

        { 'ingredientClass': $(this).val() },
        function (result) {
            $('[id$=_SlideOutPanelBodyTable]').empty();
            $(result).each(function () {

                var row = this.toString();

                $('[id$=_SlideOutPanelBodyTable]').append(row);

            });
            adjustBodytable();
        });

    });


function callScriptMethod(url, jsonObject, callback, async) {

    callback = callback || function () { };
    async = (async == null || async);

    $.ajax({
        type: 'POST',

    contentType: 'application/json; charset=utf-8',
    url: url,
    data: JSON.stringify(jsonObject),
    dataType: 'json',
    async: async,
    success: function (jsonResult) {
        if ('d' in jsonResult)
            callback(jsonResult.d);
        else
            callback(jsonResult);
    },
    error: function () {
        alert("Error calling '" + url + "' " + JSON.stringify(jsonObject));
        callback([]);
    }
});

}

Answers


Use SlickGrid with a AJAX data source. (Demos here.)

Basically, you only load 50 rows at a time. As the user scrolls, the next 50 rows are requested and seamlessly rendered. Additionally, SlickGrid dynamically creates and removes DOM elements as the user scrolls, so there's never physically more rows than what is on the screen. This means SlickGrid can handle literally millions of rows without flinching.


I believe you are looking for this:

There are lots of plugins out there but I think the second link is your best bet.


Need Your Help

What's a fluent interface?

c++ coding-style fluent-interface

I recently came across this expression - but reading up on Wikipedia did not clarify it much for me - I still don't get it:

Cant deploy Passenger with Nginx

ruby-on-rails ruby nginx passenger

I have been following this tutorial to deploy Phusion Passenger with Nginx, and after finishing, I still get an error when I open the URL with the IP address (http://123.123.123.123)