Красивые таблички, это уже не мое дело, а вот как построить на клиенте табличку из данных, это можно показать, хотя это действо на клиенте ничем по сути не будет отличаться от подобного на сервере. Разница может быть только в случае работы на клиенте с DOM, а не создания строки html кода таблицы, а потом помещения ее на страницу. Хотя и в случае работы с DOM получение данных из объекта ничем не будет отличаться и при формировании строки.
Но прежде чем строить "красивую табличку", нужно озаботиться чтобы данные для этой таблички были в удобном для клиента формате. А если посмотреть на массив данных на сервере, то видим в нем кроме полезного и кучу мусора (_related:yii\db\BaseActiveRecord
rivate, _errors:yii\base\Model
rivate и другие). Более того, каждый вложенный массив объекта app\models\LogBonus Object содержит два вложенных массива _attributes:yii\db\BaseActiveRecord
rivate дублирующих друг друга или вы этого не замечаете? И какие же в этом случае данные будет содержать "красивая табличка" на клиенте?
Опять предположим, что все эти проблемы предварительно решены на сервере и клиенту не передается в итоге мусора и дубликатов. Но еще один вопрос остался без ответа - все ли данные массива _attributes:yii\db\BaseActiveRecord
rivate нужно отображать на клиенте или же просто выдрано из базы все что есть и отправлено клиенту? А ведь если нужно не все, то придется на клиенте идентифицировать только те свойства объекта, которые нужно поместить в таблицу, а это бесполезная работа в таком случае будет.
Далее будет много слов, но коли хотите строить красивые таблички, читайте, думайте, и отправляйте клиенту данные осознанные, а не абы как.
Предположим, что из всех ключей вложенных массивов _attributes:yii\db\BaseActiveRecord
rivate на клиенте нужно отобразить лишь некоторые. Для этого правильнее всего определять в запросе к базе только эти поля. Если это является проблемой, то можно получить срез массива, можно получить пересечением массивов нужные ключи, а можно в цикле формировать новый массив только тех данных, которые и будут отправлены клиенту.
И опять предположим, что с этим все ОК и клиенту отправляются только необходимые данные, и пусть для примера возьмем эти:
|
Код:
|
Array
(
[0] => Array
(
[oper] => Оплата по Заказ наряд 18930 (26.09.12) / 7079
[oper_summa] => 7079.00
[dat_oper] => 2012-09-26 13:20:00
)
[1] => Array
(
[oper] => Оплата по Заказ наряд 27303 (19.10.13) / 6399
[oper_summa] => 210.00
[dat_oper] => 2013-10-19 12:35:55
)
) |
Отдав эти данные клиенту как json, и вот так:
json_encode($array, JSON_UNESCAPED_UNICODE | JSON_NUMERIC_CHECK)
после их преобразования в объект, получим:
html = [
{"oper" : "Оплата по Заказ наряд 18930 (26.09.12) / 7079", "oper_summa" : 7079, "dat_oper" : "2012-09-26 13:20:00"},
{"oper" : "Оплата по Заказ наряд 27303 (19.10.13) / 6399", "oper_summa" : 210, "dat_oper" : "2013-10-19 12:35:55"}
];
Но прежде чем отдавать именно такую структуру данных полезно бы призадуматься. Нам нужно только построить таблицу из этих данных, то есть поместить значения свойств объектов этого массива в ячейки таблицы, имена самих свой не нужны. Можно конечно пробежать циклом по этому массиву/объектам, получить значения свойств и сформировать таблицу. Можно, но зачем, если можно обойтись без этого.
На сервере средствами РНР можно обрамить элементы массива тегами ячейки таблицы, сформировав код таблицы и делается это просто, вариант с циклом:
echo '<table>';
foreach($array as $v) echo '<tr><td>' . implode('</td><td>', $v) . '</td></tr>';
echo '</table>';
При этом не важно каким массивом является $v, ассоциативным или индексным, в любом случае implode() будет оперировать со значениями массива.
В JS функция аналогичная implode(), это join(). Но она применима только к массивам, а ассоциативный массив отданный клиенту будет представлять на нем как
Объект, и нельзя будет так же просто в цикле получать объект, и применить к нему join:
'<tr><td>' . html[i].join('</td><td>') . '</td></tr>' - это ошибка, так как html[i] в массиве объектов, это объект.
Отсюда вывод, что для "просто вывести данные в таблице на клиенте" выгоднее отправлять ему только данные, то есть индексный массив, вот такой:
|
Код:
|
Array
(
[0] => Array
(
[0] => Оплата по Заказ наряд 18930 (26.09.12) / 7079
[1] => 7079.00
[2] => 2012-09-26 13:20:00
)
[1] => Array
(
[0] => Оплата по Заказ наряд 27303 (19.10.13) / 6399
[1] => 210.00
[2] => 2013-10-19 12:35:55
)
) |
И на клиенте получим не массив объектов, а массив массивов, вот что будет содержать переменная html в ответе на запрос:
html = [
['Оплата по Заказ наряд 18930 (26.09.12) / 7079', '7079.00', '2012-09-26 13:20:00'],
['Оплата по Заказ наряд 27303 (19.10.13) / 6399', '210.00', '2013-10-19 12:35:55']
];
Теперь и на клиенте можно упростить задачу построения таблицы, получая в цикле каждый вложенный массив массива html и посредством join() формировать строку таблицы.
Но колонки таблицы еще и имеют заголовки поясняющие данные. Здесь опять неизвестно, то ли если фиксированные данные отдаются клиенту и одноразовые, то есть сценарий на клиенте строящий эту таблицу, строит только ее, а значит эти заголовки жестко прописаны в сценарии, а строки таблицы получаемые из данных нужно добавить в таблицу, то ли клиент может получать различные таблицы с различными данными. Во втором случае заголовки таблиц выгоднее не прописывать жестко в сценарии, а получать их также от сервера наряду с данными таблиц, и иметь один и тот же сценарий на клиенте строящий по ним таблицы.
При этом на сервере можно поступить по разному, как способ, иметь массив описывающий заголовки таблиц и отдавать те, что удовлетворяют параметру запроса. Но самое разумное, это источником заголовков является сам источник данных. Поля таблиц могут иметь комментарии описывающие их. Эти комментарии можно получить запросом к базе:
|
Код:
|
'SELECT COLUMN_NAME, COLUMN_COMMENT
FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = "base_name"
AND TABLE_NAME = "table_name"' |
и по ключам запрашиваемых полей данных (COLUMN_NAME), получить из этого запроса комментарии этих полей (COLUMN_COMMENT), при этом данные клиенту можно передать так:
|
Код:
|
array = [
'head' => [массив описывающий колонки таблицы],
'data' => [
[массив значений],
[массив значений],
[массив значений],
....
]
] |
на клиенте из html.head массива строим строку заголовков таблицы (посредством того же join()), а обходом в цикле массива html.data строки таблицы с данными.
Примечание - если читаем это и не понимаем, то:
1) показать конкретное представление данных получаемых клиентом
2) данные не должны иметь дубликатов, мусора и ненужных данных (см. выше)
3) если п. 2 не выполняется, описать условия - какие именно данные должны быть помещены в таблицу на клиенте.
PS. Колобки с языком, это следствие ВВ, а не данные из базы, надеюсь понятно будет о каких именно речь.
