Repeater displays records of multiple rows in the database in one row

Source: Internet
Author: User

Sometimes we want to display multiple rows of records in the database with one row. For example, each five rows are merged into one row for display. Here we use repeater to bind a data display as an example (it is also a repeater. How about it? Its power is different. He really loves him .)

I have two methods, both of which have been tested successfully.

Method 1:

I don't have to say. First, we recommendSimplest.CodeAs follows:

<Div style = "width:1000px; ">
<Asp: repeater id = "filenamelist_repeater" runat = "server">
<Headertemplate>
</Headertemplate>
<Itemtemplate>
<Div Style="Float: left;Width:200px; Height: 150px ">
<% # Eval ("classname") %>
</Div>
</Itemtemplate>
<Footertemplate>
</Footertemplate>
</ASP: repeater>
</Div>

The number of rows displayed is determined by <div> width: 1000px, and <div> width: 200px. In this example, five records are displayed in one row (PX for each record ). In additionStyle = "float: left"This must be set

. In this way, the line breaks automatically after five records are displayed. (How about it? It's simple. That is, a little bit of CSS + div is used)

Method 2:

Another method is more traditional. Put all record rows in <Table>. After each input of five rows of records (assume that one row shows five rows of records in the data table), dynamically add <tr> In the repeater to wrap the record. It seems quite natural to use this method, but do you know how to implement it? The Code is as follows:

<Asp: repeater runat = "server" id = "repeater1" onitemdatabound = "repeaterincluitemdatabound">
<Headertemplate>
<Table width = "100%" border = 0 align = "center"> <tr>
</Headertemplate>
<Itemtemplate>
<TD><% # Eval ("bind field") %></TD>
</Itemtemplate>
<Footertemplate>
</Tr> </table>
</Footertemplate>
</ASP: repeater>

Background code:

// In RepeaterItemdataboundDynamically add <tr> to the event to wrap the line.

Protected int I = 0;
Protected void repeaterincluitemdatabound (Object SRC, repeateritemeventargs E)
{
If (I % 5 = 0)

{
E. Item. Controls. Add (New literalcontrol ("</tr> <tr>"); // dynamically add <tr> to wrap the line. See clearly. Here is</Tr> <tr>I'm not confused
}
I ++;

}

When comparing the two methods, it is obvious that the first method is very simple. You only need to process it at the front end. However, the second method is not complex and logical.

Below I will analyze the advantages of the two methods

The first is the simplestAnd it may solve the problem of displaying multiple tables. For example, we use repeater nesting. Make multiple rows in multiple tables merge and display (the above mentioned is "one table and multiple rows merge and display". For how to "multi tables and multiple rows merge and display", refer 《Big intelligence in the Repeater controlOfNested use of Repeater).

the second design does not require too many styles. , and unlike the first method, the width directly set in

is PX. The first method may display data on different monitors in different places on the screen. However, we can still solve the display problem through CSS styles. The second method is suitable for "merging and displaying multiple rows in one table". Of course, you can also "merging and displaying multiple rows in multiple tables ". You only need to activate the itemdatabound event for both the external repeater and the Repeater control nested in it.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.