Can't make table pagination


#1

I want to use data rendered in form ( because it contains data received from service) and use it in embedded form ( i want to add pagination to my table view in camunda embedded form, i have this html code:

  <table name ="table" id="myTable" class="table table-hover  table-list-search" data-table="order-table" style="width:100%;" cellspacing="0">
                <thead>
                    <tr>
                        <th style="width:80px; height:25px;"><input style="width:25px; height:25px;" type="checkbox" onclick="checkAll(this)"></th>
                        <th style="width:140px;">id</th>
                        <th style="width:305px;">organizationNameEN</th>
                        <th style="width:305px;">organizationNameGE</th>
                        <th style="width:305px;">priority</th>
                         <th>&nbsp;</th>
                    </tr>           
                </thead>
                <tbody ng-repeat="item in jsonData" >
                    <tr>
                        <td><input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item.id)"  /></td> 
                        <td>{{item.id}}</td>
                        <td>{{item.organizationNameEN}}</td>
                         <td>{{item.organizationNameGE}}</td>   
                         <td>{{item.priority}}</td>                   
                         <td><button class="btn btn-default btn-xs" ng-click="toggle($index)"><span class="glyphicon glyphicon-eye-open"></span></button></td>
        </tr>   
        <tr id="{{hideid + $index}}" ng-show="item.hidethis">
                <td>
        <label for="startDate" class="control-label">startDate</label>
         <div class="controls">
          <input style="width:105px;" id="strtDate" class="form-control" type="text" ng-model="item.startDate" required  readonly/>
          </div>
          <br>
          <label for="endDate" class="control-label">endDate</label>
           <div class="controls">
          <input style="width:105px;" id="endDate" class="form-control" type="text" ng-model="item.endDate" required  readonly/>
          </div>
        </td>
        </tr>           
       </tbody>
        
      </table>
      <div data-pagination="" data-num-pages="numOfPages()" 
          data-current-page="curPage" data-max-size="maxSize"  
          data-boundary-links="true"></div>     
    </div>

and here is my angular code:

  camForm.on('form-loaded', function() {
    
      jsonData=camForm.variableManager.fetchVariable('jsonData');
    });
    camForm.on('variables-fetched', function() {
    $scope.jsonData=enrichJsonDataVar(camForm.variableManager.variableValue('jsonData'));
    
    });

//pagination
$scope.curPage = 1;
$scope.itemsPerPage = 3;
$scope.maxSize=$scope.jsonData.length();
$scope.Data;
  $scope.numOfPages = function () {
    return Math.ceil($scope.jsonData.length / $scope.itemsPerPage);
  };
    $scope.$watch('curPage + numPerPage', function() {
    var begin = (($scope.curPage - 1) * $scope.itemsPerPage),
    end = begin + $scope.itemsPerPage;
    $scope.filteredItems = jsonData.slice(begin, end);
  });

I HAVE ALSO USED THIS CODE BUT IT WASN’T HELPFULL:

$.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 4,
            showPrevNext: false,
            hidePageNumbers: false
        },
        settings = $.extend(defaults, opts);
    
    var listElement = $this;
    var perPage = settings.perPage; 
    var children = listElement.children();
    var pager = $('.pager');
    
    if (typeof settings.childSelector!="undefined") {
        children = listElement.find(settings.childSelector);
    }
    
    if (typeof settings.pagerSelector!="undefined") {
        pager = $(settings.pagerSelector);
    }
    
    var numItems = children.size();
   console.log(numItems);
    var numPages = Math.ceil(numItems/perPage);
    pager.data("curr",0);
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
    }
    
    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;
    }
    
    if (settings.showPrevNext){
        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
    }
    
    pager.find('.page_link:first').addClass('active');
    pager.find('.prev_link').hide();
    if (numPages<=1) {
        pager.find('.next_link').hide();
    }
  	pager.children().eq(1).addClass("active");
    
    children.hide();
    children.slice(0, perPage).show();
    
    pager.find('li .page_link').click(function(){
        var clickedPage = $(this).html().valueOf()-1;
        goTo(clickedPage,perPage);
        return false;
    });
    pager.find('li .prev_link').click(function(){
        previous();
        return false;
    });
    pager.find('li .next_link').click(function(){
        next();
        return false;
    });
    
    function previous(){
        var goToPage = parseInt(pager.data("curr")) - 1;
        goTo(goToPage);
    }
     
    function next(){
        goToPage = parseInt(pager.data("curr")) + 1;
        goTo(goToPage);
    }
    
    function goTo(page){
        var startAt = page * perPage,
            endOn = startAt + perPage;
        
        children.css('display','none').slice(startAt, endOn).show();
        
        if (page>=1) {
            pager.find('.prev_link').show();
        }
        else {
            pager.find('.prev_link').hide();
        }
        
        if (page<(numPages-1)) {
            pager.find('.next_link').show();
        }
        else {
            pager.find('.next_link').hide();
        }
        
        pager.data("curr",page);
      	pager.children().removeClass("active");
        pager.children().eq(page+1).addClass("active");
    
    }
};

$(document).ready(function(){
    
  $('#myTable1').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});
    
});

and when i deploy war and start task it gives me this error:Form failure: jsonData is not defined
( i can’t get this jsonData camVariable from CamForm) is there any flexible way to get camForm varieble?
@kristin YOU ARE ALWAYS VERY HELPFUL , DO YOU HAVE ANY IDEA ABOUT THIS CASE?


#2

Hi @Sally,

I see 2 problems in your code.

First:
You try to set a value to the variable jsonData in camForm.on('form-loaded', function()});
Please change your code to:

camForm.on(‘form-loaded’, function() {
camForm.variableManager.fetchVariable(‘jsonData’);
});

Second:
You use the variable jsonData in your code.
Please use $scope.jsonData instead of jsonData.

After these changes, you can check whether your pagination implementation works.

Cheers
kristin


#3

@kristin thank you for your reply, yes i have made this changes but pagination doesn’t work in mycase i have 15 record on one page but i want to have 5 pages with 3 record


#4

Did you fix the pagination in your form? I got the same problem in mine :confused:


#5

No i have replaced this logic with filters so that i don’t need paging any more