2013-10-31 49 views
3

我用引導,jQuery的數據表和columnFilterWidgets.jsjQuery的數據表sDom推columnFilterWidget向左(火狐)

Firefox下它會可怕錯誤(columnfilterwidget.js自身推到表的左邊),當我使用這個sDom -Declaration:

"sDom": 'W<"clear">lrtip', 

enter image description here

相反當我使用這個sDom聲明:

"sDom": '<"H"W>lrtip' 

過濾器出現在表格上方。 有這種小白線(因爲<「H」>的)

enter image description here

我想用第一sDom-宣言,但它應該正確地使用Firefox顯示。你認爲哪裏是錯誤?我不知道! Chrome控制檯中沒有任何內容...

+1

可以添加你的表定義?數據表版本..? bJQueryUI是真是假? –

+0

整個代碼需要找出問題.... –

回答

2

有幾件事:你是否包含columnFilterWidget css?有一個包含這些樣式定義的css文件。一定要包括他們:

.column-filter-widget { float:left; padding: 5px; } 
.column-filter-widget select { display: block; } 
.column-filter-widgets a.filter-term { display: block; text-decoration: none; padding-left: 10px; font-size: 90%; } 
.column-filter-widgets a.filter-term:hover { text-decoration: line-through !important; } 
.column-filter-widget-selected-terms { clear:left; } 

對我來說,這個sDom工作得更好:"sDom": 'lfrWtip'

如果必須使用"sDom": '<"H"W>lrtip',什麼是你的CSS類「H」定義爲? <「H」W>表示將小部件(W)包含在類別爲「H」的DIV中。所以無論是你的H類引入白線,還是DIV繼承另一個css類的白線。

+0

寬限期在30分鐘內結束。我認爲你的回答很有幫助,所以我至少給你+1。 –

1

我想你可以用css來解決這個問題。在沒有整個代碼的情況下很難理解是什麼導致了firefox中的這個bug,但是對於給定的打印屏幕,似乎表頭高度太小。也許你可以使用類似的東西:

.ui-widget-header{ /* or maybe a better selector for your jQueryUI theme "header"*/ 
    height:auto; /* or a bigger value */ 
} 
2

我試圖讓類似的設置中的jsfiddle:

http://jsfiddle.net/G8WZb/3/

如此看來,你只需要新的背景圖像和多數民衆贊成。所以我使用了透明背景,然後爲整個表格封裝器創建了新的背景,這是後面的過濾器和表格標題。我只是在它後面做了漸變,但最好還有一張照片。

既然你沒有發送一個css或jqueryUI使用的主題名稱,那麼我不能提供更準確的幫助。

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="width:980px"> 
    <thead> 
     <tr> 
      <th>Rendering engine</th> 
      <th>Browser</th> 
      <th>Platform(s)</th> 
      <th>Engine version</th> 
      <th>CSS grade</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="gradeX"> 
      <td>Trident</td> 
      <td>Internet Explorer 4.0</td> 
      <td>Win 95+</td> 
      <td class="center">4</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Trident</td> 
      <td>Internet Explorer 5.0</td> 
      <td>Win 95+</td> 
      <td class="center">5</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Trident</td> 
      <td>Internet Explorer 5.5</td> 
      <td>Win 95+</td> 
      <td class="center">5.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Trident</td> 
      <td>Internet Explorer 6</td> 
      <td>Win 98+</td> 
      <td class="center">6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Trident</td> 
      <td>Internet Explorer 7</td> 
      <td>Win XP SP2+</td> 
      <td class="center">7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Trident</td> 
      <td>AOL browser (AOL desktop)</td> 
      <td>Win XP</td> 
      <td class="center">6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 1.0</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 1.5</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 2.0</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Firefox 3.0</td> 
      <td>Win 2k+/OSX.3+</td> 
      <td class="center">1.9</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Camino 1.0</td> 
      <td>OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Camino 1.5</td> 
      <td>OSX.3+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Netscape 7.2</td> 
      <td>Win 95+/Mac OS 8.6-9.2</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Netscape Browser 8</td> 
      <td>Win 98SE+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Netscape Navigator 9</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.0</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.1</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.2</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.2</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.3</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.3</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.4</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.4</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.5</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.6</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">1.6</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.7</td> 
      <td>Win 98+/OSX.1+</td> 
      <td class="center">1.7</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Mozilla 1.8</td> 
      <td>Win 98+/OSX.1+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Seamonkey 1.1</td> 
      <td>Win 98+/OSX.2+</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Gecko</td> 
      <td>Epiphany 2.20</td> 
      <td>Gnome</td> 
      <td class="center">1.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 1.2</td> 
      <td>OSX.3</td> 
      <td class="center">125.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 1.3</td> 
      <td>OSX.3</td> 
      <td class="center">312.8</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 2.0</td> 
      <td>OSX.4+</td> 
      <td class="center">419.3</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Safari 3.0</td> 
      <td>OSX.4+</td> 
      <td class="center">522.1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>Google Chrome 1.0</td> 
      <td>Win XP+</td> 
      <td class="center">525</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>OmniWeb 5.5</td> 
      <td>OSX.4+</td> 
      <td class="center">420</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>iPod Touch/iPhone</td> 
      <td>iPod</td> 
      <td class="center">420.1</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Webkit</td> 
      <td>S60</td> 
      <td>S60</td> 
      <td class="center">413</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 7.0</td> 
      <td>Win 95+/OSX.1+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 7.5</td> 
      <td>Win 95+/OSX.2+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 8.0</td> 
      <td>Win 95+/OSX.2+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 8.5</td> 
      <td>Win 95+/OSX.2+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 9.0</td> 
      <td>Win 95+/OSX.3+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 9.2</td> 
      <td>Win 88+/OSX.3+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera 9.5</td> 
      <td>Win 88+/OSX.3+</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Opera for Wii</td> 
      <td>Wii</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Nokia N800</td> 
      <td>N800</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Presto</td> 
      <td>Nintendo DS browser</td> 
      <td>Nintendo DS</td> 
      <td class="center">8.5</td> 
      <td class="center">C/A</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>KHTML</td> 
      <td>Konqureror 3.1</td> 
      <td>KDE 3.1</td> 
      <td class="center">3.1</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>KHTML</td> 
      <td>Konqureror 3.3</td> 
      <td>KDE 3.3</td> 
      <td class="center">3.3</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>KHTML</td> 
      <td>Konqureror 3.5</td> 
      <td>KDE 3.5</td> 
      <td class="center">3.5</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Tasman</td> 
      <td>Internet Explorer 4.5</td> 
      <td>Mac OS 8-9</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Tasman</td> 
      <td>Internet Explorer 5.1</td> 
      <td>Mac OS 7.6-9</td> 
      <td class="center">1</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Tasman</td> 
      <td>Internet Explorer 5.2</td> 
      <td>Mac OS 8-X</td> 
      <td class="center">1</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Misc</td> 
      <td>NetFront 3.1</td> 
      <td>Embedded devices</td> 
      <td class="center">-</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeA"> 
      <td>Misc</td> 
      <td>NetFront 3.4</td> 
      <td>Embedded devices</td> 
      <td class="center">-</td> 
      <td class="center">A</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Misc</td> 
      <td>Dillo 0.8</td> 
      <td>Embedded devices</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Misc</td> 
      <td>Links</td> 
      <td>Text only</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeX"> 
      <td>Misc</td> 
      <td>Lynx</td> 
      <td>Text only</td> 
      <td class="center">-</td> 
      <td class="center">X</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Misc</td> 
      <td>IE Mobile</td> 
      <td>Windows Mobile 6</td> 
      <td class="center">-</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeC"> 
      <td>Misc</td> 
      <td>PSP browser</td> 
      <td>PSP</td> 
      <td class="center">-</td> 
      <td class="center">C</td> 
     </tr> 
     <tr class="gradeU"> 
      <td>Other browsers</td> 
      <td>All others</td> 
      <td>-</td> 
      <td class="center">-</td> 
      <td class="center">U</td> 
     </tr> 
    </tbody> 
</table> 

CSS:

.column-filter-widget { 
    float:left; 
    padding: 5px; 
} 
.column-filter-widget select { 
    display: block; 
} 
.column-filter-widgets a.filter-term { 
    display: block; 
    text-decoration: none; 
    padding-left: 10px; 
    font-size: 90%; 
} 
.column-filter-widgets a.filter-term:hover { 
    text-decoration: line-through !important; 
} 
.column-filter-widget-selected-terms { 
    clear:left; 
} 

#example_wrapper { 

    background-image: linear-gradient(to bottom, #F4F3F8 0%, #ECEBF1 50px); /* here I changed background-image */ 
    background-color: #ECEBF1; /* you need special img as a fallback for IE7,8,9 or there will be no gradient */ 

    /* just delete the rest */ 
    border: solid #CDCCD1 1px; 
    border-radius: 8px; 
} 

JS:

$('#example').dataTable({ 
     "sDom": 'W<"clear">lrtip' 
}); 

外部資源:

http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js

http://datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/media/js/ColumnFilterWidgets.js

http://datatables.net/release-datatables/media/css/demo_table_jui.css