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> </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?
