Нужна помощь с использованием ThemeRoller

Я использую DataTables , чтобы нарядить таблицу, которую я использую для отображения результатов XML на основе преобразования XSL. У меня есть все, что работает в техническом смысле (пейджинг, сортировка, фильтрация), но я пытаюсь понять тему ThemeRoller, чтобы она выглядела так, как будто они есть на их веб-сайте.Нужна помощь с использованием ThemeRoller

До сих пор я добавил следующий файл в моем проекте с его ссылкой:

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"/>

и включен ThemeRoller темы, используя следующие в соответствии с веб-сайта DataTables:

$(document).ready(function() { 
    $('#mainTable').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "two_button" 
    }); 
});

таблица получает но он не выглядит правильно, когда строки заголовка слишком широки, а вещи находятся на нескольких строках, которые должны быть на одной строке. Любое указание на то, что я делаю неправильно? Большое спасибо заранее.

HTML код:

<html> 
    <body> 
    <head runat="server"> 
     <META http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <link type="text/css" href="css/custom-theme/jquery-ui-1.8.7.custom.css" rel="stylesheet"> 
     <script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"> 
     </script> 
     <script src="Scripts/jquery.dataTables.min.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
         $(document).ready(function() { 
          $('#example').dataTable({ 
           "bJQueryUI": true 
          }); 
         }); 
        </script> 
    </head> 
    <table cellpadding="0" cellspacing="0" border="0" id="example" class="display"> 
     <thead> 
     <tr> 
      <th> 
      <h3>Title</h3> 
      </th> 
      <th> 
      <h3>URL</h3> 
      </th> 
      <th> 
      <h3>Notes</h3> 
      </th> 
      <th> 
      <h3> 
      </h3> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td> 
      <a href="http://www.roperband.com">Jesse\'s Article</a> 
      </td> 
      <td> 
      <a href="http://www.roperband.com">http://www.roperband.com</a> 
      </td> 
      <td>Some of Jesse\'s notes</td> 
      <td> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 
</html></span> 

    </div> 
    <div class="clear"> 
    </div> 
    <div class="footer"> 
    </div> 
    </form> 
</body> 
</html>

источник

2011-01-03 Jesse Roper

@Music Magi: Любой способ опубликовать снимок экрана о том, что происходит не так? –

Не могли бы вы поместить код таблицы html? –

@Andrew http://imgur.com/BcNtZ –

Я основывая DataTable в этом example, проверьте CSS у вас есть для этого примера и увидел этот file решает эту проблему:

CSS:

table.display thead th div.DataTables_sort_wrapper { 
    position: relative; 
    padding-right: 20px; 
    padding-right: 20px; 
} 

table.display thead th div.DataTables_sort_wrapper span { 
    position: absolute; 
    top: 50%; 
    margin-top: -8px; 
    right: 0; 
}

run code

источник

2011-01-03 18:46:19

Спасибо. Я включил этот файл, и теперь окно поиска и кнопки разбиения на страницы находятся там, где они должны быть. Тем не менее, строка заголовка по-прежнему огромна, и она по-прежнему не похожа на пример на их странице .. Я чувствую, что я все еще не хватает чего-то –

Похоже, теперь все работает нормально, но шрифт не одинаковый для всех компонентов , Я бы подумал, что это будет частью всей темы. Есть ли что-то, что я должен добавить, чтобы убедиться, что моя таблица получает этот шрифт? Спасибо .. похоже, что только верхний и нижний колонтитулы не берут шрифт .. где он говорит «Показать 10 записей» и «Показывает от 1 до 10 из 41 записей» –

, который настроен в файле «http://www.datatables.net/release-datatables/media/css/demo_page.css "в строке 5. В браузерах IE7 +, Safari и Firefox у вас есть инструменты для проверки и анализа каждого элемента со стилями. Вы можете сделать это на странице «http://www.datatables.net/examples/basic_init/themes.html». –

Если ваша проблема еще не решена. Попробуйте включить jquery.ui.-1.x.x.js. Я думаю, что jquery ui не работает без этого.

источник

2012-01-16 18:36:34

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

Нужна помощь с использованием ThemeRoller

ответ

Смежные вопросы