2013-05-01 6 views
0

Я использую jQuery DataTables для сортировки данных таблицы, и я хочу настроить макет. Вместо рамки, в которую вставляются элементы HTML, я просто хочу указать идентификаторы, где они должны быть. Это моя инициализация:Настройка дизайна с jQuery DataTables

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#results-table').dataTable({ 
      "sDom": 'fi' 
     }); 
    }); 
</script> 

Это ставит как строку поиска, так и текст информации. Я уже создал вход, который я хочу использовать для фильтра, а также div для отображаемой информации. Мне просто нужна фреймворк, чтобы вставить HTML в эти элементы, а не создавать новые.

+0

Этих элементов происходят за пределами таблицы. Не уверен, что вы просите. –

+0

Что значит «за пределами стола»? они находятся за пределами

html –

+0

Прошу прощения за то, что там неясно. Я имею в виду, что когда Datatables инициализируется, он создает три div (обертку, фильтр и информацию) вокруг

. Я уже создал вход, который я хочу использовать для фильтра, а также div для отображаемой информации. Мне просто нужна фреймворк, чтобы вставить HTML в эти элементы, а не создавать новые. – Arun

ответ

1

Ok так это то, как вы добавить свои собственные элементы в sDom (заметим, что в моем примере, я использую JQuery UI для стайлинга, так что я должен добавить элементы пользовательского интерфейса)

var oTable = $('#example').dataTable({ 
    "bJQueryUI": true, 
    "bProcessing": true, 
    "bServerSide": true, 
    "sDom": '<"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-  helper-clearfix"l f <"dataTables_mylist"><"dataTables_dater"> r>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>', 

datatables_mylist и dataTables_dater являются идентификаторами элементов, которые я вставляю в содержимое после загрузки. Вам нужно будет использовать стандартные методы jQuery/DOM (т. Е. AppendChild) после инициализации DataTables, он не сможет захватить существующий элемент и переместить его.

В моем приложении MyList кнопка, которая OnClick применяет определенный фильтр идентификатора пользователя, так что я не должно отобразить столбец пользователя, а пользователь оленьей кожи должен ввести свой идентификатор пользователя в поле поиска

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