2011-09-08 7 views
1

내가 오직 할 필요가 즉 dataTables plugin를 사용하여 열에서 가시성을 전환 알고의 ID 또는 클래스를 사용하여 열을 얻을 수전환 열 가시성 사용하는 클래스가

function fnShowHide(iCol){ 
    /* Get the DataTables object again - this is not a recreation, just a get of the object */ 
    var oTable = $('#content-table-redesign').dataTable(); 

    var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 
    oTable.fnSetColumnVis(iCol, bVis ? false : true); 
} 

를하지만이 가능하거나 다른 의미?

나는 또한 사용자가 열을 끌어서 놓기를 허용하고 색인으로 이동하면 "id"(열 0)를 숨길 수 있습니다. 그러나 그들은 다른 곳으로 옮겼습니다. 0 위치에 있으면 "id"대신 숨김을 얻습니다.

어느 쪽이든, 또는 어디에서 이동했는지에 관계없이 열 색인을 링크하도록 플러그인을 속일 수 있습니다. 여기에 편집

몸은 기본적으로 동일하다 HTML, 난 클래스를 찾고 있어요

<table id="content-table-redesign" class="display"> 
      <thead> 
       <tr> 
        <th class="ID">ID</th> 
        <th class="Name">Name</th> 
        <th class="Domain">Domain</th> 
        <th class="email">email</th> 
       </tr> 
      </thead> 
      <tbody> 

(각 TD는 일 부모와 같은 클래스가) 하나 때문에 해당 클래스가 들어있는 클래스가 thead와 tbody 모두 제거됩니다.

답변

4

가장 쉬운 대답은 단순히 dataTables가 기본적으로 지원하지 않으므로 인덱스를 기반으로 인덱스를 수동으로 가져와야한다는 것입니다. 수업 중. 다행히도, 이것은 쉽습니다!

var iCol = $('#content-table-redesign tr').first().children('td.yourclass').index(); 
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 
oTable.fnSetColumnVis(iCol, bVis ? false : true); 

선택자는 물론 테이블 구조에 따라 th.yourclass을 사용해야 할 수도 있습니다. 그래서 대신 읽을 수 있습니다

$('#content-table-redesign thead tr').children('th.yourclass').index(); 

UPDATE

당신의 HTML을 기반으로, 여기 당신의 선택 : 당신은 "0"콘솔 로그를 알게 될 것이다

$('#content-table-redesign thead tr').children('th.ID').index(); 

: http://jsfiddle.net/YeAHB/

+0

나는 언제나 -1이라는 지수를 얻는다. 가시적인지 여부 또는 재 배열 여부와 상관없이 – Tsundoku

+0

당신은 HTML과 당신이 찾고있는 것을 게시해야합니다. –

+0

나는 내 질문을 업데이트했습니다. – Tsundoku

0

필자는이 플러그인을 사용한 적이 없지만 html 구조에 따라 jQuery .index()를 사용하여/당신은 클래스 이름과 쇼를 지정할 수 있습니다 DataTables의 최신 버전

http://jsfiddle.net/UwQ35/

+0

이렇게하면 모든 행에 ID가 있어야합니다. 이는 특히 DOM이 이미 작업 할 구조를 제공 할 때 효율적이지 않습니다. – Incognito

+0

ID는 단지 예일 뿐이며, 클래스가 될 수 있습니다 (이는 그가 원했던 것입니다) – Andre

1

을 열을 숨길 수 : 아이 ...

이 바이올린에서 살펴 보자.

var data_table = $('#data-table').DataTable(); 
data_table.columns('.location-col').visible(true); 

희망이 있습니다.

관련 문제