jQuery - display html in smaller parts during post

Is it possible to split th开发者_Go百科e returned data into parts and display it one part at the time instead of displaying the whole chunk at once?

It would probably look better to the user if the search result was built in the browser rather than just hanging for a couple of seconds while displaying it all at once.

$("#searchForm").submit(function (event) {
    event.preventDefault();
    $.post($(this).attr('action'), $(this).serialize(), function (data) {

        $("#myTable tbody").html(data);

    });
});  

The returned data is html consisting of many table rows<tr></tr>....<tr></tr> which I'm adding to the tbody, if that helps...

If json is not a solution for your problem, since the mass of your data is the actual content, not the added markup, then I can offer some solutions:

1. recursive loading cycles: You have to prepare you server side code to return intervals from the wholde data, for example 100 rows at once. Then you write an asnyc request which gets the first 100 rows, then after loading and displaying these are done, starts a new request with the second 100 rows. One after a nother displaying the data, while making the first few visible at once.

2. load more button: it's much like the same as 1. but you place a "Load more results" button at the end of the first 100 results if there is more. Clicking on this would request the second 100 results.

3. combining the two: to make user demanded but without user interaction, you can set the 2nd and on requests to start once the user scrolled to the bottom. This way the additional content would load if it is needed, but it would need no active user interaction. Also you should indicate with a spinner and text, that "more results are beeing loaded".

If you split your data in the right size of chunks, which you have to test, you can create a really seamless instatanious experience.

On top of this, you should consider using json.

I would analise the situation first. What kind of data are you dealing with?

You can for instance return a JSON string with all your data and build the markup as you receive it instead of returning plain markup in the request, something like :

$.post($(this).attr('action'), $(this).serialize(), function (data) {

  $(data).each(function (i, value) {
    // do something
  });
});

Here is a jsfiddle that breaks-up a string of html by <tr> tag and delays the output of the string: http://jsfiddle.net/DHAwB/

Here's the line that finds individual <tr>'s:

$('table').append($(data).filter('tr:nth-child(' + line_num + ')'));

Note line_num would be incremented so the display would iterate through the <tr>'s.