我正在使用数据表的FixedHeader扩展。我在网站上滚动以显示报告时使用顶部的固定标题。当我更改视图或查看其他页面时，滚动时标题将显示在所有视图上。我想在更改视图时销毁FixedHeader或在同一视图上检查其他报告。
When I open any Report first time Header looks Perfect
Header Stacking on Top of Each other when open other Report
Header showing up on other Pages(home/about/details) as well
但是当我刷新任何页面/视图时，它就会消失。我不知道，可能是从某个地方缓存的。
报告控制器的sessionCache是一个对象。附加了console.log(sessionCache)
我想在离开视图后销毁/删除/禁用/隐藏它，并在有固定标头的情况下重新启动它。
这是我的指令：
angular.module('datatable.directive', [])
.directive('datatable', function ($compile) {
return {
scope: {
dtData: '=',
dtColumns: '=',
dtSort: '=',
dtDirection: '=',
dtFilter: '=',
dtPagination: '=',
dtFixed: '='
},
transclude: true,
controller: function($scope, $location) {
$scope.navigateToListing = function(id) {
$location.path('/seller/listing/management/' + id);
};
},
link: function (scope, elem, attrs, ctrl) {
var pagination = true;
if( attrs.dtPagination == 'no' ) {
pagination = false;
}
$.fn.dataTable.ext.errMode = 'throw';
$(elem).dataTable({
bFilter: true,
data: scope.dtData,
columns: scope.dtColumns,
language: {
search: '',
searchPlaceholder: 'Search'
},
createdRow: function ( row, data, index ) {
// $(row).attr('ng-class', '{selected: selectedRow['+data.id+']}');
$compile(row)(scope.$parent);
},
initComplete: function() {
var thead = elem.find('thead tr');
var ix = 0;
var columns = this.api().init().columns;
this.api().columns().every( function () {
if(!columns[ix].uniqueFilter) {
ix++;
return;
}
var column = this;
var th = elem.find('thead tr th').eq(ix);
var title = columns[ix].sTitle;
var select = $('<select class="form-control input-sm"><option value="">' + title.toUpperCase() + '</option></select>');
select.on( 'change', function (ev) {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
select.on('click', function(ev) {
ev.stopPropagation();
});
select.appendTo(th.empty());
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
} );
ix++;
} );
if(scope.dtFilter) {
var table_id = $(this).attr('id');
$("#" + table_id + "_filter").appendTo("#" + scope.dtFilter);
$("#" + table_id + "_filter").find("input").first().removeClass("input-sm");
}
},
lengthChange: false,
order: scope.dtSort == 'NONE' ? []: [[scope.dtSort || 0, scope.dtDirection || 'desc']],
paging: pagination,
fixedHeader: scope.dtFixed == true ? true : false
});
}
};
});
这是我的控制器：
angular.module('reports.controller', [])
.controller('ReportsCtrl', ['API_URL', '$scope', '$route', '$location', 'SessionSvc', 'ReportSvc', '$analytics', 'CacheFactory', 'ngDialog', '$filter',
function (API_URL, $scope, $route, $location, SessionSvc, ReportSvc, $analytics, CacheFactory, ngDialog, $filter) {
$scope.API_URL = API_URL;
$scope.state = {};
$scope.state.dtFilterField = 'filter_target';
$scope.loading = false;
ReportSvc.getReports().then(function (resp) {
var reports_var = resp.data.data;
scope.reports = _.groupBy(reports_var, 'category');
});
$scope.getReport = function (rpt_key, rpt_name) {
$scope.state.selectedReport = rpt_name;
$scope.state.values = {};
$scope.loading = true;
$scope.error = "";
ReportSvc.get(rpt_key).then(function (resp) {
$scope.loading = false;
$scope.state.reportName = resp.data.data.name;
$scope.state.reportKey = resp.data.data.key;
if( resp.data.data.error ) {
$scope.error = resp.data.data.error;
}
else {
$scope.state.reportDesc = resp.data.data.description;
$scope.state.colNames = resp.data.data.cols;
$scope.state.values = resp.data.data.values;
var colSpec = [];
_.each($scope.state.colNames, function (colName) {
var spec = {'title': colName.replace(/_/g, ' ')};
if (reportParams[rpt_key] && reportParams[rpt_key]['colSpec'][colName]) {
angular.extend(spec, reportParams[rpt_key]['colSpec'][colName])
}
colSpec.push(spec)
});
$scope.state.dtColumns = colSpec;
}
}, function(resp) {
alert("Error running report.")
});
};
reportParams['TEST'] = {
'colSpec': {
'company_name': {'uniqueFilter': true},
'listing_id': {
'render': function (data, type, full, meta) {
return '<a ng-href="/listing_details/' + data + '">' + data + '</a>';
}
}
}
};
var sessionCache = CacheFactory.get('sessionCache');
$scope.$on('$routeChangeStart', function (next, current) {
sessionCache.put('reportContext', $scope.state)
});
if (sessionCache.get('reportContext')) {
$scope.state = sessionCache.get('reportContext');
}
}]);
这是我的HTML：
<div style="width:100%; padding-bottom: 15px;" ng-if="state.values.length > 0">
<table style="width:100%" class="table table-bordered" dt-fixed="true" dt-sort="'NONE'" dt-direction="desc" datatable dt-data="state.values" dt-filter="state.dtFilterField"
dt-columns="state.dtColumns" dt-pagination="no">
</table>