Lazy DataTable |

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Important: Add default request params page and RowsPerPage.

Step 3: Include northwind.xml source files in Logi Info Application Include northwind.xml source files in Logi Info Application

<DefaultRequestParams page="1" RowsPerPage="2" />

The Basics

Scroll/Load Listener

$(window).on('load scroll', function() {
   //Scroll position is 300px from bottom.
   if($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
      ... 	  
   }
});

Ajax Call

$.ajax({
   url: './rdPageAsync.aspx?rdReport=[at]Request.rdReport[tilde]&page='+nextPage, 
   async: true,
   success: function(responseData) {
      //Append response to current table
   }
});

SQL

DECLARE [at]page INT=[at]Request.page[tilde];
DECLARE [at]RowsPerPage INT=[at]Request.RowsPerPage[tilde];
SELECT * 
FROM (SELECT * 
             , ROW_NUMBER() OVER(ORDER BY ProductID) AS RowNum 
      FROM Products) tbl
WHERE RowNum > ([at]RowsPerPage * [at]page - [at]RowsPerPage) 
  AND RowNum <= ([at]RowsPerPage * [at]page)

ProductID	Product Name	Quantity Per Unit	Price	Units In Stock	Units On Order	Reorder Level
1	Chai	10 boxes x 20 bags	$18.00	39	0	10
2	Chang	24 - 12 oz bottles	$19.00	17	40	25

Full Example

Add .blur class to stylesheet for last row animation.

.blur {
	transition: all 0.500s ease-out;
	-webkit-filter: blur(5px) grayscale(0.5);
}

<DataTable Class="table table-striped" ID="dtLazyLoad">
  <DataLayer JsonFile="Data.Products.json" Type="JsonFile" XPath="rdData/dtLazyLoad/Products/Product">
    <ConditionFilter Condition="[at]Data.-ProductID[tilde] &gt;= (([at]Request.page[tilde]-1)*[at]Request.RowsPerPage[tilde])+1 AND [at]Data.-ProductID[tilde] &lt;= ([at]Request.page[tilde]*[at]Request.RowsPerPage[tilde])" />
  </DataLayer>
  <AutoColumns />
</DataTable>
<Label Class="text-danger" ID="lblMessage" />

/*START INCLUDE SCRIPT ELEMENT...*/
var nextPage = [at]Request.page[tilde];
var isRunning = false;
$(window).on('load scroll', function() {
   //Set timeout interval to keep scroll listener from firing multiple times.
   if(!isRunning)
      scrollHandler();
});
scrollHandler = function () {
   isRunning = true;  
   if($(window).scrollTop() + $(window).height() > $(document).height() - 2200) {
      nextPage++;
      var DataTableName = $('[id^=rdDataTableDiv]>table').attr('id');
      var AjaxUrl = './rdPageAsync.aspx?rdReport=[at]Request.rdReport[tilde]&page='+nextPage;
      $.ajax({
         url: AjaxUrl, 
         async: true,
         success: function(responseData) {
            var rowsData = $(responseData).find('#'+DataTableName+'>tbody>tr');
            var rowNum = ((nextPage-1)*[at]Request.RowsPerPage[tilde])+1;
            rowsData.each(function() {
               rowNum++;
               $('#'+DataTableName+' tr.blur').removeClass('blur');
               $(this).attr('row', rowNum).addClass('blur');
               $('#'+DataTableName+'>tbody').append($(this));
            });
            
            if(rowsData.length == 0){                  
               //Finished
               $('#'+DataTableName+' tr.blur').removeClass('blur');
               $('#lblMessage').html('End of data...').delay(1500).fadeOut();
               $(window).unbind('scroll');
            }
            else {
               scrollHandler();
            }
         }
      });
   }
   else {
      isRunning = false;        
      $('.blur').removeClass('blur');
   }
};
/*...END INCLUDE SCRIPT*/

<Division ID="dvExample" HtmlDiv="True"> <DataTable Class="table table-striped" ID="dtLazyLoad"> <DataLayer JsonFile="Data.Products.json" Type="JsonFile" XPath="rdData/dtLazyLoad/Products/Product"> <ConditionFilter Condition=" >= ((1-1)*2)+1 AND <= (1*2)" IncludeCondition="'1' != ''" /> </DataLayer> <AutoColumns /> </DataTable> <Label Class="text-danger" ID="lblMessage" /> <IncludeScript IncludedScript="var nextPage = parseInt('1' || 1);
var rowsPerPage = parseInt('2' || 1);
var isRunning = false;
$(window).on('load scroll', function() {
 //Set timeout interval to keep scroll listener from firing multiple times.
 if(!isRunning)
 scrollHandler();
});
scrollHandler = function () {
 isRunning = true; 
 if($(window).scrollTop() + $(window).height() > $(document).height() - 500) {
 nextPage++;
 var DataTableName = $('[id^=rdDataTableDiv]>table').attr('id');
 var AjaxUrl = './rdPageAsync.aspx?rdReport=Extend.LazyDataTable&page='+nextPage;
 $.ajax({
 url: AjaxUrl, 
 async: true,
 success: function(responseData) {
 var rowsData = $(responseData).find('#'+DataTableName+'>tbody>tr');
 var rowNum = ((nextPage-1)*rowsPerPage)+1;
 rowsData.each(function() {
 rowNum++;
 $('#'+DataTableName+' tr.blur').removeClass('blur');
 $(this).attr('row', rowNum).addClass('blur');
 $('#'+DataTableName+'>tbody').append($(this));
 });
 
 if(rowsData.length == 0){
 $(window).unbind('scroll');
 $('#lblMessage').html('End of data...');
 setTimeout(function() {
 $('#lblMessage').fadeOut();
 }, 1500);
 }
 else {
 scrollHandler();
 }
 }
 });
 }
 else {
 isRunning = false; 
 $('.blur').removeClass('blur');
 }
};
" /> </Division>

Lazyload Data Table

How To

The Basics

Full Example