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

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

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

Когда я меняю тему, все компоненты 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-стилей:

Любая подсказка очень ценится.

Источник

3 ответа

Решение

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

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

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

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

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

Источник

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

Источник

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

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

Источник
Другие вопросы по тегам