Предполагая, что вы, возможно, захотите передать базовые данные клиенту без генерации разметки в php, вы можете сделать это следующим образом:
- Убедитесь, что ваш сервер доставляет данные в компактной форме.Поскольку вы сказали, что ваши данные представляют собой SQL-запрос, я предполагаю, что вы можете легко сбросить его с помощью
encode_json($results) в PHP, который будет выглядеть примерно так:
// title, wiki-link, x-coord, y-coord
var data =
[["Amsterdam", "Amsterdam", 747, 290],
["Barcelona", "Barcelona", 747, 290],
...
]
Я добавил вики-ссылку простов случае, если это не заголовок;)
Теперь, используя jQuery и underscore.js , вы можете сгенерировать свой контент с помощью нескольких строк кода:
// group your data by the first letter of the title
var grouped = _.groupBy(data, function(row) {
// row[0] is the title
return row[0].substring(0, 1)
})
// generate the header
var letters = _.keys(grouped)
var header = $('<ul>', { id: 'iphone-search' })
_.each(letters, function(letter) {
$('<a>', { href: '#' + letter, title: letter }).html(letter).appendTo(header)
})
// the scroll body
var scrollBody = $('<ul>', { id: 'iphone-scroll' })
_.each(letters, function(letter) {
var li = $('<li>')
// create the navigational anchor
$('<a>', { name: letter }).appendTo(li)
// create the div to put the ul/li... on
var div = $('<div>', {
'class': 'nav-indicator',
'id': 'nav-' + letter.toLowerCase()
}).appendTo(li)
var ul = $('<ul>').appendTo(div)
_.each(grouped[letter], function(group) {
// now, for each element within the group
// create the <li><a>...</a></li> content
$('<li>').append(
$('<a>', {
title: group[0],
href: 'http://en.wikipedia.org/wiki/' + group[1] // the wiki-link
}).append(
$('<strong>').html(group[0])
).append(
$('<span>').html(group[2] + ', ' + group[3])
)
).appendTo(ul)
})
})
// now you can join them in the container
var container =
$('<div>', { id: 'iphone-scrollcontainer'}).append(header).append(scrollBody)
Это должновыдайте только тот HTML-код, который вы хотели;) Последняя часть выглядит немного грязной, но, по крайней мере, в том же стиле, что и все элементы, сгенерированные только jQuery.