Как изменить родительские свойства HTML пользовательского макета в DataTables 2.0?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как изменить родительские свойства HTML пользовательского макета в DataTables 2.0?

Сообщение Anonymous »

Я пытаюсь добавить собственный HTML-код в верхнюю часть таблицы DataTable, но отмечаю, что столбцы, которые DataTables автоматически создает для собственных полей и настраиваемых полей, не имеют одинаковых свойств (собственный код: col-md-auto, custom: col-md).
Как изменить родительские классы пользовательских макетов в DataTables 2.0? Я пытаюсь избежать хакерского обходного пути с цепочкой селекторов CSS, если это возможно.
Здесь мы видим результат: мои пользовательские разделы HTML добавлены, но для них установлено значение col-md. , а не col-md-auto, из-за которого текст складывается при некоторых размерах экрана
[img]https://i.stack.imgur. com/qzhM1.png[/img]
Изображение

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

Код: Выделить всё










Name
Position
Office
Age
Start date
Salary




Tiger Nixon
System Architect
Edinburgh
61
2011/04/25
$320,800


Garrett Winters
Accountant
Tokyo
63
2011/07/25
$170,750






[url=#]Home[/url]
[url=#]Test[/url]
[url=#]Dashboard[/url]





Archived


Код: Выделить всё

$(document).ready(function() {

let html_links = $("#links");
let html_archived_check = $("#archived_checkbox_container");

$('#myDataTable').DataTable({
searching: true,
searchDelay: 500, //(ms) avoid searching on every keystroke

layout: {
//random note: for custom layout keys, must start with 'top' or 'bottom'.  Probably
//datatables is parsing for that internally and silently discarding otherwise?
topStart: "pageLength",
topMiddleCustom: [html_links],
topMiddle2Custom: [html_archived_check],
topEndCustom: "search", //add default search bar *manually* to fix positioning
topEnd: null //remove the default search bar because it gets positioned wrong
},
});
});
Мой вопрос гораздо проще понять, проверив JSFiddle и проверив элемент в результирующем выводе.
https://jsfiddle.net/kq4ws817 /2/

Подробнее здесь: https://stackoverflow.com/questions/782 ... tables-2-0
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»