使用JQuery數據表時的自定義表格樣式

我想使用基於JQuery的數據表添加分頁到我的html表格。使用JQuery數據表時的自定義表格樣式

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#example').dataTable({ 
     "bJQueryUI": true, 
        "sPaginationType": "full_numbers", 
        "sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>' 
       }); 
     }); 
    </script> 

<table id="example" 
    style="border: silver solid 1px; width: 890px; margin-left: 0px; margin-bottom: 10px; font-size: 11px; padding-top: 10px;"> 
<tr class="thResultHeader">

排序是可選的，但不是問題，如果它不存在。

我的問題是當我使用"bJQueryUI": true時，我的列標題出現藍色標題，分頁圖標未突出顯示。當我使用"bJQueryUI": false時，分頁圖標突出顯示，標題樣式被覆蓋。我所需要的只是分頁與我的表格樣式，無論是否排序和突出顯示分頁圖標。我是JQuery和Datatables的新手，不幸的是無法離開它。

來源

2011-04-01 Harish

我不確定你的意思是突出顯示，但你可以添加自己的CSS風格的分頁元素與現場活動。

<style> 
    .highlighted {color:#F00;} 
</style> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example').dataTable({ ... }); 
     $('.dataTables_wrapper .fg-button').live('mouseenter mouseleave', 
     function() { $(this).toggleClass('highlighted'); }); 
    }); 
</script>

高亮風格必須按順序了jQuery UI的樣式錶鏈接後宣佈結束了jQuery UI的樣式具有優先權。

來源

2011-04-01 14:38:49

我想修改tr和th的類以及事實上那些是被覆蓋的屬性。這個解決方案不能解決我的問題。 – Harish 2011-04-04 03:17:30

我是新來的JQuery和Datatables，不幸的是不能離開它。

爲什麼不幸，如果你不介意說？

我懷疑你所遇到的問題可以通過包含用於jQuery UI主題的DataTables附帶的演示CSS來解決。我的猜測是，要麼你有用於非主題滾輪樣式（demo_table.css）的CSS或不提供分頁所需內容的自定義CSS。 DataTables發行版中的文件是media/css/demo_table_jui.css。顯然，沒有什麼能阻止你完全定製它，但它至少可以給你一個起點。

艾倫

來源

2011-04-01 16:31:04 Allan

我相信你是這個插件的創造者，我已經在我的代碼中集成了這個插件，不能再改回其他一些功能， – Harish 2011-04-01 19:22:06

我確實是:-)。您能否說DataTable中缺少您感覺到的功能，因此我可以考慮將來的開發？以上是否有助於您的造型問題？ – Allan 2011-04-02 06:38:26

週末：）週一必須試穿，肯定會告訴你是否有幫助。 – Harish 2011-04-02 14:59:59

我聽說你...我只是切換到數據表，我發現很難正確放置的造型我的表，因爲有這個插件如此多的選項，並生成CSS類。這是一件好事，但也很難學習。我只是使用第th元素來讓我的風格跨越我網站上的任何表格。

th { 
background-color: #94AECE; 
color: #003366; 
padding-left: .1em; 
padding-right: .1em; 
border-left: 1px solid #dbddff; 
border-right: 1px solid #dbddff; 
border-bottom: 1px solid #dbddff;

}

你應該知道的是，「sDom」選項是一個，你說哪個樣式應用到你的表。我personnaly保持簡單與「sDom」：'<「標題」fr> t <「頁腳」pi>「，它將我的風格映射到」頁眉「和」頁腳「css類。之後，您只需要在您的網站css中定義「標題」和「頁腳」。

來源

2011-04-29 20:35:56

我解決了這個問題，現在桌子是我的風格，順便說一句，我不使用sDom.I不理解它。我刪除了頂部的搜索欄，因爲它對我來說沒有必要 – Harish 2011-04-30 10:04:10

對於我做了2個CSS類命名爲「.odd」和「.even」。所以我對我的行有一個交替的顏色。 – 2011-05-02 18:42:20

在測試了Codigo Espagueti的解決方案後，我發現一個問題，當十六進制隨機數的最後一個數字爲零（0）時，生成的字符串將會簡單地有5個字符而不是6個。所以這是我的消化。

有一個很好的cooding。

'#' + (function() { 
     while (true) { 
      var rdm = (Math.random() * 0xFFFFFF << 0).toString(16); 
      if (rdm.length == 6) 
      return rdm; 
     } 
     })();

來源

2015-03-06 17:19:15

使用JQuery數據表時的自定義表格樣式

回答

相關問題