How do I load a HTML table sections at a time

I have a table that will rebuild async every time 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 separate 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 trying 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([]);
    }
});
}

---

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:

• http://www.infinite-scroll.com/
• Load content while scrolling with jquery

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

---

You will need a form of pagination on your backend in order to limit the number of rows it returns. Then, fire an event in JQuery to pull new rows into the table using AJAX by incrementing the page number request.

We need more information before giving actual solutions.