Salut à tous!

Je vous présente un tutoriel intéressant 😎 : la pagination d’une vue liste éditable dans un formulaire K2. En effet K2 permet d’ajouter la pagination sur une vue liste non éditable. Mais il n’est pas possible d’ajouter la pagination sur une vue liste éditable.

Regardons ensemble comment faire ceci !

Avant tout nous devrons d’abord designer une vue liste éditable sur un SmartObject

Générer une vue liste éditable K2

Nommons notre vue USERS_ListView ce nom sera utilisé par la suite.

Insérez 05 data labels sur la vue :

dl_Pagination_JS : pour notre code JS de la pagination.
dl_PaginationStyle_CSS : pour notre code CSS.
dl_Pagination_Color : pour paramétrer la couleur de notre pagination.
dl_RowsTotal : indique le nombre total de ligne de notre tableau.
dl_RowsShow : indique le nombre maximal de ligne à afficher par page.

Cliquez sur le data label dl_Pagination_JS (respectivement dl_ PaginationStyle_CSS), puis cochez la case Literal comme sur l’image ci-dessous.

Configuration de la pagination

Paramétrer le nombre total de ligne :

Cliquez sur Column et ensuite sur Add vous aurez deux nouveaux objets comme le montre la figure ci-dessous:

Puis cliquez sur chacun des composants et dans les propriétés de ces composants décochez la case visible.

Code JS de la pagination :

Cliquez sur fx puis sur Add :

Remplissez la fenêtre qui s’ouvre comme ci-dessous: copiez et collez le code ci-dessous

                                                                                             <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

Style de la pagination :

Cliquez sur fx puis sur Add :

Remplissez la fenêtre qui s’ouvre comme ci-dessous: copiez et collez le code ci-dessous.

<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

Dans la partie Expression details: remplacez dans ce code la chaîne de caractère Pagination_Color_XXXXX par le data label dl_Pagination_Color. Comme le montre les figures ci-dessous :

Exécution du code JS :

Tout d’abord nous allons créer une règle sans événement (unbound rule) :

Cliquez sur Add Rule

nommez cette règle _Load_Pagination :

Ajoutez les trois actions suivantes :

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

Cliquez sur OK

Ensuite dans l’onglet rule modifiez la règle Initialize de votre vue:
Ajoutez l’action execute another rule puis sélectionnez la règle _Load_Pagination créée précédemment :

Faites la même modification sur les règles Refresh et ajoutez l’action execute another rule puis sélectionnez la règle _Load_Pagination. Puis cliquez sur OK.

Modifiez sur les règles Save et ajoutez l’action execute another rule puis sélectionnez la règle liée au bouton Refresh. Puis cliquez sur OK.

Nous sommes arrivés à la fin, encore un dernier effort 😉

Génération du formulaire :

Sélectionnez le formulaire puis cliquez sur Test URL

Vous aurez ce résultat final:

Voilà le résultat. Merci 🙂

Flow Factory How to K2 pagination Vue liste éditable

Ajouter la pagination sur une vue liste éditable K2