2013-08-14 3 views
4

열 수가 고정되어 있지 않은 테이블이 있습니다. 그러나 처음 세 열은 항상 존재합니다. 또한Datatable : 선택한 열의 고정 너비

"aoColumns": [[1, { "sWidth": "50px" }] ] 

이 : (열 수가 그 접근 방식에서 수정 될 필요가로)

그래서, 다음과 같은 속성이

"aoColumns": [ 
     {"sWidth": "50px"}, 
     {"sWidth": "100px"}, 
     {"sWidth": "100px"}, 
     null, 
     null, 
     null 
    ] 
}); 

내가 좋아하는 뭔가를 시도 내 경우에는 작동하지 않을 것입니다 일부 오류가 발생하여 작동하지 않습니다.

좋은 방법을 제안 해주세요.

답변

4

왜 함수가 동적으로 aoColumns 배열을 생성하도록하지 않습니까?

// function that generates the aoColumns-array based on the tables <thead> 
// columns beyond #3 get a fixed 25px width (just to be illustrative) 
// expand the switch if certain columns need certain fixed widths 
function aoColumns() { 
    var ao = []; 
    $("#table th").each(function(i) { 
     switch (i) { 
      case 0 : 
       ao.push({"sWidth": "50px"}); 
       break; 
      case 1 : 
       ao.push({"sWidth": "100px"}); 
       break; 
      case 2 : 
       ao.push({"sWidth": "100px"}); 
       break; 
      default : 
       ao.push({"sWidth": "25px"}); 
       break; 
     } 
    }); 
    return ao; 
} 

$(document).ready(function() { 
    var table = $('#table').dataTable({ 
     aoColumns: aoColumns() 
    }); 
}); 

이 방법을 사용하면 테이블에 1, 3 또는 1000 열이 있는지에 관계없이 데이터 테이블이 올바르게 초기화됩니다. 오히려 자신의 인덱스에 비해 각각 열 캡션을 기준으로 열 너비를 평가하려면

, 당신은 aoColumn 기능에게 litte 비트를 변경해야합니다 :

function aoColumns() { 
    var ao = []; 
    $("#table th").each(function(i, th) { 
     var caption=$(th).text(); 
     switch (caption) { 
      case 'A' : 
       ao.push({"sWidth": "50px"}); 
       break; 
      case 'B' : 
       ao.push({"sWidth": "100px"}); 
       break; 

      /*... 
      and so on 
      ...*/ 

      default : 
       ao.push({"sWidth": "25px"}); 
       break; 
     } 
    }); 
    return ao; 
} 
+3

thanku 데이비드을 ... –