jQuery UI主题内数据表插件

我正在使用jquery数据表插件，并添加了一些自定义jquery-ui按钮到表格页脚。要使用带有jquery-ui主题的数据表插件，必须打开“bJQueryUI”选项。jQuery UI主题内数据表插件

到目前为止没有问题，但现在我添加了jquery-ui themeroller到我的页面。

当我更改主题时，所有jquery-ui组件都相应地改变其样式，就像数据表一样，除了数据表中的按钮。

我发现它实际上是一个css优先级问题：由美乐家应用的新样式得到的优先级低于原始样式，所以这些按钮从不改变他们的样子。

由于jQuery的UI组件和插件都是很受欢迎的，我想我会找人用类似的问题，但没有运气迄今为止的DataTable ..

那怎么DataTable，并创立了初始化自定义的按钮来完成：

<table id="DataTable"> 
// ... 
</table> 
<script type="text/javascript"> 
    $(function() 
    { 
     var oDataTable = $('#DataTable').dataTable({ 
      "aaData": result.aaData, 
      "bPaginate": false, 
      "bJQueryUI": true, 
      "bInfo": true, 
      "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"ipT<"toolbar">>', 
      "oTableTools": 
      { 
       "sRowSelect": "single" 
      } 
     }); 
     // add buttons 
     $("div.toolbar").html('<button id="AddButton">New element</button>'); 
     $("#AddButton").button().click(function() { /* ... */ }); 
     // add more buttons... 
    } 
</script>

下面是实际的HTML结构的屏幕截图和应用CSS的样式： http://i.stack.imgur.com/vbAuy.jpg

任何暗示是极大的赞赏。

来源

2011-07-18 Gigo

它是“bJQueryUI”是造型的按钮，并重写jQuery UI主题？ – b01

我找到了解决自己：

如果我添加了“UI小部件内容” CSS-类工具栏容器的div ，样式得到正确应用。要删除类适用的（边框和背景）的风格，我加了一个更具体的CSS样式删除这些：

div.toolbar 
{ 
    float: right; 
    border: 0; 
    background: 0; 
}

使用“div.toolbar”而不是“.toolbar”它在这里很重要的，否则ui-widget-content样式被应用。现在，工具栏容器并没有得到不需要的样式，内部的按钮正确地获取了选定的主题。

也许这对使用带有自定义jquery-ui按钮的数据表中的美乐师有帮助。

来源

2014-06-17 23:02:32 Gigo

如果您想让主题控制按钮的样式，请将覆盖主题滚轴样式的CSS注释掉。

如果它们是主题按钮，那么您将不得不移除CSS以使主题生效。主题很容易覆盖，所以你可以添加自定义，只不过听起来你不再需要自定义。

来源

2011-07-18 03:43:13 b01

覆盖主题滚轮样式的CSS是原始主题。如果我发表评论，页面会被搞砸。我没有改变任何风格，它们都是jquery-ui标准。 – Gigo

我可以将“每页记录数”文本更改为数据表插件中的记录。我可以在“搜索”文本字段中放置一个“占位符”，而不是“标记”搜索。 –

搜索选项在数据表中右对齐。我可以将搜索文本框的对齐方式更改为在特定页面上左对齐吗？ –

不知道你是否有这个问题，但有两个独立的css类与数据表。真或bJQueryUI：如果你有bJQueryUI使用哪一个取决于假

来源

2011-11-09 18:03:45 bmoran

jQuery UI主题内数据表插件

回答

相关问题