データテーブルのクリック時に1行選択する

Question

クリックされた行を選択しようとしましたが、私が直面している問題は、選択された行が異なるページに表示され、他のページに表示されないということです。

私は単純に行をクリックするとcssクラスを削除して追加します。以下のような

何か -

function rowClicked(){ 

    var table = $('#test').DataTable(); 

    $('#test tbody').on('click','tr', function() { 
     if ($(this).hasClass('selected')) { 
      $(this).removeClass('selected'); 
      console.log('helloe 1'); 
     } 
     else { 
      table.$('tr.selected').removeClass('selected'); 
      $(this).addClass('selected'); 
       console.log('helloe 3'); 
     } 
    });  


} 

Answer 1

ことはできあなたのテーブルにそのようなユーザAngualrディレクティブ<table select-row>

angular.module('myApp') 
    .directive('selectRow', selectRow); 

function selectRow($compile) { 
    var directive = { 
     bindToController: true, 
     controller: testCtrl, 
     controllerAs: 'vm', 
     link: link, 
     restrict: 'EA', 
     scope: {} 
    }; 
    return directive; 

    function link(scope, element, attrs, vm) { 
     var target, compileScope, newTd, template ; 
     target = angular.element($('table tr')); 
     compileScope = scope; 
     scope.arr = []; 
     angular.forEach(target, function(item) { 
      return scope.arr.push(item.textContent); 
     }); 
     template = '<table><thead><tr><th></th><tbody><tr ng-class="selected[$index]" ng-repeat="t in arr track by $index" ng-click="selectRow($index)"><td >{{t}}</td></tr></tbody></tr></thead></table>'; 
     template = angular.element(template); 
     $compile(template)(compileScope); 
     element.replaceWith(template); 
     // function to select row 
     scope.selectRow = function($index) { 
      scope.selected = []; 
      scope.index = $index; 
      scope.selected[$index] = scope.selected[$index] === 'selected' ? '' :'selected'; 
     } 

    } 

    function testCtrl() { 

    } 
}