CODEWITHSUNDEEP
jqueryasp.netpagination
Thomas
Thomas

Reputation: 34188

How to load huge html data on demand by jquery ajax

i have developed our company site where we show one product detail means one record in a aspx page. some time our html data is huge and user has to scroll the page multiple times to read the whole content. i know how to fetch & show fixed number of records in a page by calling asp.net server side method by jquery ajax and parse json for populate UI. the problem is that in my case the record is one i am showing per page and record comes from db. each record is a huge html data which i am showing. here i am giving a sample url of our site where we display huge html data. http://www.bba-reman.com/content.aspx?content=bba_reman_diagnostics_tools

i want to know good technique by which i can show partial data in my page and when user scroll down then next set of data will be fetch & shown. so suggest me how could i extract few part of html from whole html and display in page and when user scroll down then extract next few part html and display in page. so in short i need to know how could i divide a huge html data in few part. please help me with concept. thanks

Upvotes: 0

Views: 2297

Answers (2)

charlietfl
charlietfl

Reputation: 171669

If what you are saying is that all of the product content on the link you provided is stored in one field in db, you could use methods like wrap() to make each product like a row and based on user interaction display certain rows.

Here's some example code that is tested on your page by running it in browser console. It creates a very simple pager at top, which could also be cloned at bottom. The markup in page could be improved to make use of jQuery more efficient by adding some better ID's and there is some unusual nesting going on also

$(function(){
/* wrap each pair of picture and description in a div*/
$('.diagnostic_picture').each(function(){
   $(this).next('.diagnostic_information').andSelf().wrapAll('<div class="product_row" style="clear:both">');
});
/* cache rows to variable */
var $products=$('.product_row');
var total_products=$products.length;
/* hide all but first 5 "rows" */
$products.slice(5).hide();
/* create  a pager based on qty of products and 5 per page */
var pager='<ul class="pager" style="height:1.5em; margin: 10px 0;">';
var pager_length=Math.round( total_products/5);

for( i=0; i< pager_length; i++){
    pager+='<li style="float:left"><a href="#" style="padding:5px;color:blue; background: #CCC; margin-right:5px; display:block" data-pager_start="'+(i*5)+'">'+(i+1)+'</a></li>';
}
pager+='</ul>';
/* insert pager before first "row" */
$products.eq(0).before( pager);
/* pager click handler */
$('.pager a').click(function(){
    var start=$(this).data('pager_start');
    $products.hide().slice(start, (start+5)).show();
    return false;
});

});

I created a pager simply as an example, you could also show more rows based on scroll as well. You should be able to drop this code straight into your page to try it

Upvotes: 0

DotNetFreak
DotNetFreak

Reputation: 176

I had a similar situation in one of my project and I solved it by using JQuery .Scroll Event. Here is official link for Scroll Event. All you need to do is:

  1. Determine a limit on character size of HTML you would like to show at a time to the user. Say it is X. If your total HTML char count is more than X, then you need to return only X from DB (OR from business logic in CS file in case you want to avoid using multiple DB calls)

  2. Capture the Scroll event of the user and fetch + bind the next set of data by appending the text to the label

Upvotes: 1

Related Questions