I have a catalogue page within my site. On this page, I will display images of certain products, and their information.
For builiding the UI, I made use of Bootstrap. Here comes the problem.
I need to add pagination functionality to the catalogue page. I have read some articles on the ListView, with its layout and item template, as well as the DataPager control.
The problem is that since the front end is built with Bootstrap, I am a bit confused as to how to set everything up. Here is my code:
The following HTML will produce 2 rows, each containing 3 images horizontally, so all together producing 6 products per page.
<div class="categories row-fluid"><div class="span4"><div class="category1"><img id="myImageHolder" runat="server" class="image1" alt="" src="../img/metal_candle.png" /></div><div class="details"><div class="button"><button class="square" type="button">Add to Cart</button></div><ul><li>Description:</li><li>Colour:</li><li>Price:</li></ul></div></div><div class="span4"><div class="category1"><img class="image1" alt="" src="../img/metal_candle.png" /></div><div class="details"><div class="button"><button class="square" type="button">Add to Cart</button></div><ul><li>Description:</li><li>Colour: </li><li>Price:</li></ul></div></div><div class="span4"><div class="category1"><img class="image1" alt="" src="../img/metal_candle.png" /></div><div class="details"><div class="button"><button class="square" type="button">Add to Cart</button></div><ul><li>Description:</li><li>Colour: </li><li>Price:</li></ul></div></div></div>
The above code is repeated in my aspx page to produce "2 rows". I did not place it here.
The categories row-fluid produces a new row, and the class="span4" indicates that each "product" should span 4 columns, where there is a total of 12, producing 3 images per row.
How would I go about putting these into a ListView, so that there will only be 6 products per page (3 per row, 2 rows), with the pagination function if bounded to a DataSource.
I am just looking for help with the layout/Group Template.
Thanks