Как визуализировать YUI datatable?

После the documentation of the YUI DataTable control я уже выводил следующий код:Как визуализировать YUI datatable?

<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT> 
    <SCRIPT type="text/javascript"> 
     // Create a new YUI instance and populate it with the required modules. 
     YUI().use('datatable', function (Y) { 
      // Columns must match data object property names 
      var data = [ 
       { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" }, 
       { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" }, 
       { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" } 
      ]; 

      var table = new Y.DataTable({ 
       columns: ["id", "name", "price"], 
       data: data, 

       // Optionally configure your table with a caption 
       caption: "My first DataTable!", 

       // and/or a summary (table attribute) 
       summary: "Example DataTable showing basic instantiation configuration" 
      }); 
      table.render("#example"); 
     }); 
    </SCRIPT> 
</HEAD> 
<BODY> 
</BODY> 
</HTML>

Оскорбительной вещь, что документация говорит:

Этого код создает эту таблицу:

, за исключением того, что этот код производит эту таблицу:

enter image description here

Так что, очевидно, я что-то очень фундаментальное о том, чтобы сделать таблицу YUI данных отсутствует. Каков правильный способ отображения таблицы данных YUI?

Q. Как визуализировать YUI datatable?

Another page упоминает включая <div>, меняю <BODY> с пустым:

<BODY> 
    <div class="example yui3-skin-sam"> 
     <div id="simple"></div> 

     <div id="labels"></div> 
    </div> 
</BODY>

, но не меняет внешний вид элемента управления.

источник

2012-06-10 Ian Boyd

Переместить сценарий < в нижнюю часть тела <> или, по крайней мере, после < div>, который будет содержать DataTable. Это позволит избежать состояния гонки, когда сценарии могут быть загружены до установки DOM до.

Render («# пример») говорит о DataTable для визуализации в элемент с идентификатором «например» Образец разметки Вы включили есть DIV с класса в «примере», затем два дивы с идентификаторами «простые» и «ярлыки». Вам нужно убедиться, что вы выполняете внутри родительского элемента класс yui3-skin-sam. Если вы укажете виджету YUI для визуализации в элемент, который он не может найти, он возвращается к рендерингу внутри тела <>. Вы можете это исправить несколькими способами:

добавить класс < тела тега> вместо < div> (не плохая идея, но вы все равно должны зафиксировать цель визуализации селектор)
использования рендер (?) целевой селектор, который соответствует элементу на странице, например рендер ('. example'), render ('# simple') или render ('# labels').

В любом случае, убедитесь, что ваша цель визуализации находится внутри элемента с классом = «yui3-скин-САМ»

источник

2012-06-11 06:54:12 Luke

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

http://jsbin.com/3/ebadiq/1/edit?html,live – Luke

Добавить class="yui3-skin-sam" в тег тела, таблицы CSS записывается соответствующее этому классу.

источник

2013-07-30 14:38:54 user2634563

Как визуализировать YUI datatable?

ответ

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