Кодинг
★ Рубрика: Кодинг
★ Тема: Google, Javascript

Красивая таблица с сортировкой

Приведем пример красивой стильной таблицы с возможностью сортировки данных в таблице по колонкам. Чтобы увидеть как работает сортировка - кликните на заголовок колонки - появится указатель на направление сортировки.
Чтобы установить такую таблицу на ваш сайт вам потребуется для начала подключить
Затем скрипт с данными и настройками таблицы:
google.load("visualization", "1", {packages:["table"]});
 google.setOnLoadCallback(drawTable);
 function drawTable() {
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Имя');
 data.addColumn('number', 'Зарплата');
 data.addColumn('boolean', 'Выплата');
 data.addRows([
 ['Игорь', {v: 10000, f: '$10,000'}, true],
 ['Федор', {v:8000, f: '$8,000'}, false],
 ['Семен', {v: 12500, f: '$12,500'}, true],
 ['Алекс', {v: 7000, f: '$7,000'}, true]
 ]);
 var table = new google.visualization.Table
(document.getElementById('table_div'));
 table.draw(data, {showRowNumber: true});
 }
И конечно же контейнер, в котором вы выгрузите таблицу:
Возможно, вам понадобятся также настройки стиля отображения таблицы. Для каждого сайта это свой набор. Для нашей таблицы из примера, были использованы следующие настройки:
.google-visualization-table-table {
 font-family: arial,helvetica;
 font-size: 10pt;
 cursor: default;
 margin: 0;
 background: white;
 border-spacing: 0;
width:100%;
align:center;
}
#table_div > div > div > table > thead > tr > th:nth-child(1){width:60px;}
#table_div > div > div > table > thead > tr > th:nth-child(4){width:120px;}
table,th,tr,td {text-align:center !important;}
 Похожие публикации: Google, Javascript

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]