Jquery 데이터 테이블 사용하고 있습니다. 응용 프로그램을 실행할 때 몸에 헤더입니다 너버 정렬되지 않은 너비입니다. 하지만 그 때 내가 헤더입니다 클릭하면 된다 해도 그 후 점점 정렬되고 너버 는 몇 가지 표시등으로 정렬. Ie 에서만 이 문제가 발생합니다.
This is how get 로드되었는지 페이지를 보면 보입니다.
클하면 헤더에:
내 데이터 테이블 코드:
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]
});
'속도' 가 내 테이블 id. 누구나 할 수 있는 돕는다구요 이? 미리 감사합니다.
처음에는 대부분 해당 테이블 숨겨짐 데이터 테이블 jQuery 의 열 폭 계산할 수 없게 됩니다.
예를 들어, 부트스트랩에 축소 플러그인.
$ (& # 39, # myCollapsible& # 39;) 오언 (& # 39, shown.bs.collapse& # 39, 함수 () { $ ($ 오픈.다타터블스타바레스 (true) 벌린다테이블 () 스콜럼산자드쥐스트 (); }).
예를 들어, 부트스트랩에 탭 플러그인에는:
$ (& # 39, & # 39 는 [데이터 전환하십시오 = " tab";];) 오언 (& # 39, shown.bs.tab& # 39, 함수 (e) { $ ($ 오픈.다타터블스타바레스 (true) 벌린다테이블 () 스콜럼산자드쥐스트 (); }).
코드 페이지 테이블 위에 있는 모든 열 폭 조정합니다. 참조 [자드쥐스트 '열 () ()'] (http://datatables.net/reference/api/columns.adjust% 28%29) api 메서드을 자세한 내용을 확인할 수 있습니다.
참조 [jQuery 데이터 테이블 - 열 폭 문제가 부트스트랩에 탭들] (http://www.gyrocode.com/articles/jquery-datatables-column-width-issues-with-bootstrap-tabs) 에서 가장 일반적인 문제 해결 방안을 함께 열 때 테이블 데이터 테이블 jQuery 는 처음에 감춰집니다.
내가 이 방식으로 이 문제를 해결할 랩할 " dataTable"; 있는 테이블 '을 (를)' 자동 ':' div 오버플로입니다:
.dataTables_scroll
{
overflow:auto;
}
이 후, 추가 데이터 테이블 '네' JS 초기화하지:
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
난 내 업무에 고정.
var table = $('#example').DataTable();
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();
또는
var table = $('#example').DataTable();
table.columns.adjust().draw();
하지만 난 결국 기타 솔루션 협력했습니다 가져다줄래요 해법을 찾을 수 없었다.
이 문제는 내 버전니다 # 39, & # 39 box-sizing& 타사 CSS 파일과 인한 설정합니다. 다른 값으로. 나는 이 문제를 해결할 수 있는 요소는 초래 없이 다른 코드는 아래와 같습니다.
$table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");
따라서 누군가가 희망을!
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [{
"bSortable": false
},
null,
null,
null,
null
]}).fnAdjustColumnSizing( false );
끝까지 프나주스콜럼시징 (false) 를 호출하면 시도하시겠습니까 너회의 데이터 테이블 가능하다. 수정날짜 코드 명이다.
문제는 데이터표 호출됨 데이터표 는 DOM, 사용 시간 설정 호출하기 전에 먼저 그려진 아웃해야 데이터표.
setTimeout(function(){
var table = $('#exampleSummary').removeAttr('width').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: true,
columnDefs: [
{ width: 200, targets: 0 }
],
fixedColumns: false
} );
}, 100);
단순히 div 태그를 통해 자동차 및 랩 테이블뿐만 요소에 오버플로입니다 포지셔닝하십시오 상대치. 크롬, IE8 작업하십시오 것입니다.
table = $('<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>').appendTo('#candidati').dataTable({
//"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
//"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
//"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
//"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
"sAjaxSource": "datass.php",
"aoColumns": colf,
"bJQueryUI": true,
"sPaginationType": "two_button",
"bProcessing": true,
"bJQueryUI":true,
"bPaginate": true,
"table-layout": "fixed",
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
oSettings.jqXHR = $.ajax({
"dataType": 'JSON',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"fnRowCallback": function(nRow, aData, iDisplayIndex) {
$(nRow).click(function() {
$(".row_selected").removeClass("row_selected");
$(this).addClass("row_selected");
//mostra il detaglio
showDetail(aData.CandidateID);
});
},
"fnDrawCallback": function(oSettings) {
},
"aaSorting": [[1, 'asc']]
}).wrap("<div style='position:relative;overflow:auto;height:400px;'/>"); //correzione per il disallineamento dello header
기타 솔루션 협력했습니다 가져다줄래요 도왔으매 I& # 39, ll 게시물로의 내 해결책: 그 후 그는 테이블에 로드중 붙여넣습니다 숨겨짐 div 와 div 보여주는 table) 가 세워졌다. 내가 먼저 표 table) 가 만든 것으로 보이는 반면, div / 우나이트 그리곤요 통했다.
그래서 데이터 테이블 can& 가능성이 크기 때문에, 단, t # 39 숨겨짐 div 에 열 때 백 테이블 숨길지 0px 너비입니다 있습니다.
I was 평면가공 같은 문제를 해결할 수 있습니다. 내가 추가했어야 스테롤스: 대한 진정한 속성 데이터 테이블 및 통했다. Css 의 데이터 테이블 변경할 필요가 없다.
jQuery('#myTable').DataTable({
"fixedHeader":true,
"scrollY":"450px",
"scrollX":true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"scrollCollapse": true
});
하지만 난 그냥 내가 아는 이는 이전 문제 및 # 39 에 실행했음 didn& 숭배자들로부터도 솔루션이므로 찾을 수 없다. 그래서 일부 scrollBody& # 39 의 js 를 사용하여 결정한 내려받습니다 테이블에 비교했을 때, 높이 높이. 이 경우, 그 때 나는 증가되지는 스테롤브로디 표) 보다 작은 테이블에 의해 고려하여 너버 15px scrollbar. 이 때 i set up on 크기조정할 이벤트 너무 도왔으매 작동하잖아 내 컨테이너입니다 변경사항과 크기:
const tableHeight = $('#' + this.options.id).height();
const scrollBodyHeight = $('#' + this.options.id).closest('.dataTables_scrollBody').height();
if (tableHeight > scrollBodyHeight) {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "calc(100% + 15px)",
})
} else {
$('#' + this.options.id).closest('.dataTables_scrollBody').css({
width: "100%",
})
}
이러한 솔루션을 가져다줄래요 협력했습니다 죄송합니다. 없었다. 어쩌면 우리는 우리의 테이블뿐 초기화하지 차이가 있기 때문에 다른 결과를 얻을 수 있습니다. 누군가를 위해 노력할 수 있는 솔루션, 그 중 한 수도 있습니다. 어쨌든 내 솔루션, 만일의 사태에 대비해 여전히 불안한 이 문제에 어떤 사람이 공유하고 싶었다. 하지만 이는 비트 하키스 표시되어도 작동하잖아 가져다줄래요 don& # 39 표, t, 하도 너비입니다 변경하십시오 실행하십시오.
난 후 페이지에서든 읽어들입니다 누르고 있기 때문에 점검 및 fs@snapa 일반적으로 헤더입니다 확장됨 헤더나 너비입니다 기록하십시오 .dataTables_scrollHeadInner '표' 나는 내 경우에는 ',' 715px div. (예: 그 후 추가 너버 css.
.dataTables_scrollHeadInner
{
width: 715px !important;
}