Настраиваемый стиль таблицы при использовании Jquery DataTables - PullRequest
Новая
       11

Настраиваемый стиль таблицы при использовании Jquery DataTables

1 голос
/ 01 апреля 2011

Я пытаюсь добавить нумерацию страниц в свою HTML-таблицу, используя Datatables, построенные на 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 и, к сожалению, не могу от него уйти.

Ответы [ 4 ]

3 голосов
/ 01 апреля 2011

Я новичок в JQuery и Datatables и, к сожалению, не могу от него уйти.

Почему, к сожалению, если вы не против сказать?

Я подозреваю, чтопроблему, с которой вы столкнулись, можно решить, включив демонстрационный CSS-код, который поставляется с DataTables для создания тем пользовательского интерфейса jQuery.Я предполагаю, что либо у вас есть CSS, используемый для ролика без темы (demo_table.css), либо пользовательский CSS, который не предоставляет то, что необходимо для нумерации страниц.Требуемый файл в дистрибутиве DataTables - media / css / demo_table_jui.css.Очевидно, ничто не мешает вам полностью настроить его, но это может дать вам хотя бы начальную точку.

Аллан

1 голос
/ 30 апреля 2011

Я вас слышу ... Я только что переключился на dataTables, и мне было трудно разместить правильный стиль в моей таблице, потому что в этом плагине так много опций и сгенерированный класс 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" - это та, где вы говорите, какие стили применяются к вашей таблице. Я лично остался простым с "sDom": '<"header" fr> t <"footer" pi>', который сопоставил мой стиль с классом "header" и "footer" css После этого вам нужно только определить «верхний колонтитул» и «нижний колонтитул» на вашем веб-сайте css.

1 голос
/ 01 апреля 2011

Я не уверен, что вы имеете в виду под выделением, но вы можете добавить свой собственный стиль 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.

0 голосов
/ 06 марта 2015

После тестирования решения Codigo Espagueti я заметил проблему, когда последнее число шестнадцатеричного случайного числа равно нулю (0), сгенерированная строка будет просто иметь 5 символов вместо 6. Так что это мое предположение

Хорошего охлаждения. 

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