2011-12-13 2 views
2

방금 ​​내 프로젝트에 django-tables2를 사용하기 시작했습니다. 내가 붙어있는 한 가지를 제외하고는 모두 잘 작동합니다. - 열 머리글에 화살표 이미지가 표시되어 테이블이 정렬되는 방식을 나타냅니다 (현재 해당 열로 정렬 된 경우).Django tables2 - 열 헤더에 정렬 지시 화살표 표시

나는 지루한 기본 {% render_table 테이블 %}을 사용하여 테이블을 렌더링하므로, 밖으로 튀어 나오는 HTML에 직접 액세스 할 수는 없으며 전체를 다시 쓰고 싶지는 않습니다. 화살표에 더하는 것.

CSS를 통해 추가하려고 시도했는데 실제로 작동하게하는 데 거의 익숙해졌지만 어디로 가고 싶습니다.

th.asc { 
    background: url("arrow-up.gif/") no-repeat scroll right 0.4em transparent; 
} 

th.desc { 
    background: url("arrow-down.gif/") no-repeat scroll right 0.4em transparent; 
} 

그것은 올바른 헤더에서 오른쪽 방향으로 화살표를 표시하지만, 화살표는 훨씬 더 텍스트보다 방법이 떨어져 열 머리글의 오른쪽에 있습니다 : 내 스타일이 추가되었습니다. 열 머리글 이름은 가변 길이이므로 각 열 머리글마다 0.4 값을 설정하는 방법을 알 수 없습니다. 그리고 텍스트의 왼쪽에 설정할 수 없습니다. 태그의 바깥쪽에 있기 때문에 배경 이미지가 전혀 나타나지 않기 때문입니다.

사용자 지정 HTML을 적절한 열 머리글에 추가하는 쉬운 방법이 있습니까? 아니면 테이블을 생성하기 위해 tables2에서 사용하는 table.html을 편집해야할까요?

답변

1

이를 읽을 수 : http://www.datatables.net/blog/Twitter_Bootstrap_2

가 실제로 위의 3 개 라인까지 감소 될 수있는 포스트에서 CSS가 django_tables2와 함께 작동하도록 :

table.table thead th.sortable { background: url('../img/sort_both.png') no-repeat center right; } 
table.table thead th.asc { background: url('../img/sort_asc.png') no-repeat center right; } 
table.table thead th.desc { background: url('../img/sort_desc.png') no-repeat center right; }