Hello !

I’ll present you an interesting tutorial 😎 : the pagination of an editable list view on K2 . Indeed, K2 allow to add the pagination on a list view that can not be editable. But it not possible to add the pagination on an editable list view. Truce of chatter let us go to the heart of the matter. 😉

First of all, we will have to design a list view editable on a smartObject.

Generate an editable list view K2

Let’s name our view USERS_ListView, this name will be used later.

Insert 05 data labels on the view :

dl_Pagination_JS : For our JS pagination code.
dl_PaginationStyle_CSS : For our CSS code.
dl_Pagination_Color : To set the color of our pagination.
dl_RowsTotal : Indicates the number total rows of our table.
dl_RowsShow : I Indique le nombre maximal de ligne à afficher par page

Click on data label dl_Pagination_JS (resp. dl_ PaginationStyle_CSS), then check the literal box as on image bellow.

Pagination of the configuration

Set the total number of rows :

Click on Column and the on Add, you will have two new composants as shown in the figure below.

Then click on each of the components and in the properties of its components uncheck the visible box.

JS code of the pagination :

Click on fx the on Add :

Fill in the window that opens as below: copy and paste the code the code below.

                                                                                             <script type="text/javascript">
$(document).ready(function(){

    var rowsShown = rowsShown_XXXXX;
    var rowsTotal = rowsTotal_XXXXX;
    var numPages = rowsTotal/rowsShown;
	$("div[name='USERS_ListView']").after('<br/><div id="pagination"></div>');
	$("div[name='USERS_ListView'] table").attr('id', 'zone');
    $('#pagination').append('<a id="preview" href="#">«</a> ');
    for(i = 0;i < numPages;i++) {
        var pageNum = i + 1;
        $('#pagination').append('<a id="num" href="#" rel="'+i+'">'+pageNum+'</a> ');
    }
     $('#pagination').append('<a id="next"  href="#">»</a> ');
	 
    $('#zone tbody tr').hide();
    $('#zone tbody tr').slice(0, rowsShown).show();
    $('#pagination a:first').next().addClass('active');
    $('#pagination #num').bind('click', function(){

      $('#pagination a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#zone tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
        css('display','table-row').animate({opacity:1}, 300);
    });
	
	  $('#pagination #next').bind('click', function(){
	  
	        var currPage = $('#pagination .active').next().attr('rel');
			
			if(currPage<numPages)
	        {
			   var activePgae= $('#pagination .active').removeClass('active');
			    currPage=currPage;
				activePgae.next().addClass('active');
				var startItem = currPage * rowsShown;
		        var endItem = startItem + rowsShown;
		        $('#zone tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
		        css('display','table-row').animate({opacity:1}, 300);
			}
    });
	  $('#pagination #preview').bind('click', function(){
	  
	        var currPage = $('#pagination .active').prev().attr('rel');
			if(currPage>=0)
	        {
			   var activePgae= $('#pagination .active').removeClass('active');
			    currPage=currPage;
				activePgae.prev().addClass('active');
				var startItem = currPage * rowsShown;
		        var endItem = startItem + rowsShown;
		        $('#zone tbody tr').css('opacity','0.0').hide().slice(startItem, endItem).
		        css('display','table-row').animate({opacity:1}, 300);
			}
    });

});
</script>

Code JavaScript pour la pagination

Pagination style :

Click on fx the on Add :

Fill in the window that opens as below: copy and paste the code the code below.

<style>

#pagination { display: inline-block;}

#pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none;}

#pagination a.active { background-color: Pagination_Color_XXXXX; color: white;}

#pagination a:hover:not(.active) {background-color: #ddd;}

#data tr { display: none;}

</style>

Style de la pagination

In the Expression details part: replace in this code the character string Pagination_Color_XXXXX by the data label dl_Pagination_Color. As shown in the figures below :

Executing the JS code :

First of all we will create an unbound rule:

Click on Add Rule

Name this rule _Load_Pagination :

Add the following three actions :

1 : transfer data

2 : set a control’s properties

3 : set a control’s properties

1 : transfer data

2 : set a control’s properties

3 : set a control’s properties

Click on OK

Then in the rule tab modify the Initialize rule of our view::
Add the action execute another rule and then select the rule _Load_Pagination created previously :

Make the same modification on the Refresh rules and add the action execute another rule then select the rule _Load_Pagination. Then click on OK.

Modify to Save rules and add the action execute another rule then select the rule linked to the Refresh button. Then click on OK.

We reached the end, one last effort 😉

Generation of the form :

Select the form and click on Test URL

You will have this final result:

That’s the result. Thank you 🙂 .

Anas says:

28 October 2020 at 5 h 29 min

Hi, In “2 : set a control’s properties” which control setting is modified?

1. jayz says:
  
  28 October 2020 at 8 h 57 min
  
  Hi Anas,
  Set control’s properties is to reinitialise the datalabel containing the Javascript.
  The Text properties is checked to empty the control.
  
  Regards,
  JJ
  
  1. Anas says:
    
    28 October 2020 at 15 h 13 min
    
    Hi Jayz, In the script rowsShown_XXXXX and rowsTotal_XXXXX should be replaced by the data labels dl_RowsShow and dl_RowsTotal right?
    Regards,
    Anas
    
    1. Emeric says:
      
      28 October 2020 at 15 h 32 min
      
      Hi Anas,
      Yes
      
      Regards,
      Emeric

Add pagination on K2 list view editable