Data Tables in Camunda

[Sally]

I want to use jss Data Tables in camunda in order to implement this functions:
1.sort, check , uncheck and choose data ( ckeck options should be used to select one concrete data(by clicking on concreate row ) or all table rows by clicking on checkbox in table header)
2. after checking i want to get row data and serialiaze it firstly as an object and then wrap it as an camVariable
in my code i tried to fullfil first part of my task, but it trows that table isn’t defined
here are several things i am intereseted in

• is it possible to use Data Tables functionality inside camunda environmte?

• if i choose 10 table row at a time is it possible to generate 10 camVariable and relatively 10 fom instance?

here is my code example:

function updateDataTableSelectAllCtrl(table){
   var $table             = table.table().node();
   var $chkbox_all        = $('tbody input[type="checkbox"]', $table);
   var $chkbox_checked    = $('tbody input[type="checkbox"]:checked', $table);
   var chkbox_select_all  = $('thead input[name="select_all"]', $table).get(0);

   // If none of the checkboxes are checked
   if($chkbox_checked.length === 0){
      chkbox_select_all.checked = false;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = false;
      }

   // If all of the checkboxes are checked
   } else if ($chkbox_checked.length === $chkbox_all.length){
      chkbox_select_all.checked = true;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = false;
      }

   // If some of the checkboxes are checked
   } else {
      chkbox_select_all.checked = true;
      if('indeterminate' in chkbox_select_all){
         chkbox_select_all.indeterminate = true;
      }
   }
}




// Handle click on checkbox
   $('#example tbody').on('click', 'input[type="checkbox"]', function(e){
      var $row = $(this).closest('tr');

      // Get row data
      var data = table.row($row).data();

      // Get row ID
      var rowId = data[0];

      // Determine whether row ID is in the list of selected row IDs
      var index = $.inArray(rowId, rows_selected);

      // If checkbox is checked and row ID is not in list of selected row IDs
      if(this.checked && index === -1){
         rows_selected.push(rowId);

      // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
      } else if (!this.checked && index !== -1){
         rows_selected.splice(index, 1);
      }

      if(this.checked){
         $row.addClass('selected');
      } else {
         $row.removeClass('selected');
      }

      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle click on table cells with checkboxes
   $('#example').on('click', 'tbody td, thead th:first-child', function(e){
      $(this).parent().find('input[type="checkbox"]').trigger('click');
   });

   // Handle click on "Select all" control
   $('thead input[name="select_all"]', table.table().container()).on('click', function(e){
      if(this.checked){
         $('#example tbody input[type="checkbox"]:not(:checked)').trigger('click');
      } else {
         $('#example tbody input[type="checkbox"]:checked').trigger('click');
      }

      // Prevent click event from propagating to parent
      e.stopPropagation();
   });

   // Handle table draw event
   table.on('draw', function(){
      // Update state of "Select all" control
      updateDataTableSelectAllCtrl(table);
   });


</script>
<h2>My job List</h2>																							
	<div>
		<table style="width:100%;"  id="example" class="display select" cellspacing="0" width="100%" >
			<thead>
				<tr>
				    <th style="width:80px; height:25px;"><input style="width:25px; height:25px;" type="checkbox" name="select_all" value="1"></th>
					<th style="width:140px;">id</th>
					<th style="width:305px;">organizationNameEN</th>
					<th style="width:250px;">cardNumber</th>
					<th style="width:250px;"></th>
					<th style="width:250px;"></th>
				
				</tr>			
			</thead>
			<tbody ng-repeat="item in arr" >
                <tr>
                    <td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"                                                     
                                                                cam-variable-name="isItemSelected"                                                  
                                                                cam-variable-type="Boolean" /></td> 
                    <td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
                    <td><input style="width:305px;" type="text" id="organizationNameEN"  ng-model="item.organizationNameEN" /></td>
<td><input style="width:305px;" type="text" id="organizationNameGE"   ng-model="item.organizationNameGE" /></td>                     
                    <td><button type="button" class="btn btn-primary" style="height:30px" data-toggle="modal" data-target="#myModal">details</button></td>
       <div class="modal fade" id="myModal" role="dialog">
       <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Details</h4>
        </div>
        <div class="modal-body">
          <p >Some Data</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>               
                </tr>
            </tbody>
		</table>
	</div>
</form>