Is there any easy way to create a a listview in HTML and set an onClick() listener for it like it can be done in Android? My requirement is that I want to retrieve data from the server and display it in a listview to the user. The data will be retrieved like - 10 rows at a time.
Then if the user clicks on more, next 10 rows will be retrieved. Then if the user clicks on a particular list item, show the details in another page.
A list in HTML looks like this.
<ul>
<li><a href="details/url/id">Title</li>
<li><a href="details/url/id">Title</li>
</ul>
The urls can goto the details page.
To add a more button you would use javascript and ajax to get more rows from the server, and append more items to the list when you get the response.
It's just a fast solution which uses Mootools, I consider your input is JSON which contain items in list array:
new Request.JSON(
{
url: '/list.json',
onSuccess: function(json)
{
json.list.each(function(key, val)
{
new Element('LI')
.set('text', val)
.addEvent('click', function()
{
alert('item '+key+' pressed');
// alert('item '+val.id+' pressed');
// considering val is an object instead of raw string, this way you must change set to something like this set('text', val.text)
})
.inject($('list'));
// any other thing you want add to your list item
});
}
}).get();
<ul id="list"></ul>
Key is the position of item in array, you can use an id instead which I added in a comment.
Rather than paginating the table, I prefer to use virtual scrolling like in SlickGrid.
SlickGrid has many modes of operation, but its core functionality is to only render the HTML of the rows you're currently looking at. As you scroll, the rows are dynamically created and destroyed as necessary. This allows you to display a grid with millions of rows.
The API allows you to load data on-demand, so rows will be fetched from the server (in groups of n) only as you scroll the grid.
You can try Jquery Data Tables:
I suggest Ember.js. Ember.js has a powerful system of bindings and templates which are used to automagically synchronise Javascript objects with eachother and the DOM. It's overkill for what you're doing, but it's worth it if you're going to be doing anything complex with that list.
The Docs for Ember.CollectionView are here:
