Тематика пользовательского интерфейса jQuery в плагине datatables

Я использую плагин jquery datatables и добавил несколько пользовательских кнопок jquery-ui в нижний колонтитул таблицы. Чтобы использовать плагин datatables с темами jquery-ui, необходимо включить опцию «bJQueryUI».

Пока проблем нет, но теперь я добавил на свою страницу темуроллер jquery-ui.

Когда я меняю тему, все компоненты jquery-ui соответственно меняют свой стиль, как и таблица данных, за исключением кнопок внутри таблицы данных.

Я обнаружил, что на самом деле это проблема с приоритетом css: новые стили, применяемые с помощью themeroller, имеют более низкий приоритет, чем исходные стили, поэтому эти кнопки никогда не меняют свой вид.

Поскольку компоненты jquery-ui и плагин datatables довольно популярны, я думал, что найду кого-нибудь с похожими проблемами, но пока не повезло.

Вот как выполняется инициализация таблицы данных и создание пользовательских кнопок:

<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

Любая подсказка приветствуется.


datatables jquery-ui themeroller
person Gigo    schedule 18.07.2011    source источник
comment
Это bJQueryUI, который стилизует кнопки и переопределяет тему пользовательского интерфейса jQuery?   -  person b01    schedule 18.07.2011

Ответы (3)


arrow_upward
1
arrow_downward

Я сам нашел решение:

Если я добавлю CSS-класс «ui-widget-content» в div-контейнер панели инструментов, стили будут применены правильно. Чтобы удалить стили, применяемые этим классом (граница и фон), я добавил более конкретный стиль CSS, чтобы удалить их:

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

Здесь важно использовать «div.toolbar», а не «.toolbar», иначе будут применены стили содержимого ui-widget. Теперь к контейнеру панели инструментов не применяются нежелательные стили, а кнопки внутри правильно получают выбранную тему.

Может быть, это полезно для тех, кто использует темуроллер с пользовательскими кнопками jquery-ui в таблицах данных.

person Gigo    schedule 17.06.2014

arrow_upward
0
arrow_downward

ЕСЛИ вы хотите, чтобы тема контролировала стиль кнопки, закомментируйте CSS, который переопределяет стиль ролика темы.

Если это тематические кнопки, вам придется удалить свой CSS, чтобы тема вступила в силу. Темы сделаны так, чтобы их можно было легко перезаписывать, поэтому вы можете добавлять настройки, только это звучит так, как будто вам больше не нужны настройки.

person b01    schedule 18.07.2011
comment
CSS, который переопределяет стиль ролика темы, является исходной темой. Если я это прокомментирую, страница испортится. Я не менял ни один из стилей, все они стандартны для jquery-ui. - person Gigo; 18.07.2011
comment
Могу ли я изменить тексты Records Per Page только на записи в плагине datatables. и могу ли я поместить Placeholder в текстовое поле search вместо поиска по метке. - person Sarfraz Ahmad; 05.12.2013
comment
Опция поиска выровнена по правому краю в таблицах данных. Могу ли я изменить выравнивание текстового поля поиска на выравнивание по левому краю на определенной странице? - person Sarfraz Ahmad; 05.12.2013

arrow_upward
0
arrow_downward

Не уверен, что у вас была эта проблема, но есть два отдельных класса css с таблицами данных. Какой из них использовать, зависит от того, есть ли у вас bJQueryUI:true или bJQueryUI:false.

person bmoran    schedule 09.11.2011