c# - 数据绑定(bind)到 asp.net 中的 Bootstrap 表

Question

我正在处理网络申请表。

目前，我在单击按钮时在 GridView 中填充数据库中的数据。我已将页面大小设置为 5，每次显示 5 行。

这是上图的代码

<asp:GridView ID="GridView1" runat="server"
                    OnPageIndexChanging="GridView1_PageIndexChanging" AutoGenerateColumns="False" 
                      CellPadding="8" AllowPaging="True" 
                      PageSize="5">

                    <AlternatingRowStyle BackColor="SkyBlue" />

                      <Columns>
                        <asp:BoundField DataField="TIMEIN" HeaderText="Time IN" />
                        <asp:BoundField DataField="ORDER_ID" HeaderText="Order ID" />
                        <%--<asp:BoundField DataField="HOST" HeaderText="HOST" />--%>
                        <asp:BoundField DataField="SOURCE" HeaderText="SOURCE" />

                        <asp:TemplateField ItemStyle-HorizontalAlign="left" ItemStyle-Width="170px" HeaderText="Request" >
                        <ItemTemplate>
                            <%# Eval ("REQUEST").ToString ().Substring (0, 80)%>
                        </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>

                </asp:GridView>

但我不想使用 GridView ，而是想在 bootstrap 中创建一个具有固定行数和分页的自定义表，而不是在运行时生成它，然后在该表中填充数据。如果少于 5 行数据，它应该显示空行。否则，其余行应该像在 GridView 中那样出现在下一页。

像这样

<div class="table-responsive">
                <table class="table table-bordered table-hover " border="1">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Time IN</th>
                            <th>Host</th>
                            <th>Source</th>
                            <th>Request</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="button" data-id="1" class="btn btn-default editButton">View</button></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="button" data-id="2" class="btn btn-default editButton">View</button></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="button" data-id="3" class="btn btn-default editButton">View</button></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="button" data-id="4" class="btn btn-default editButton">View</button></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><button type="button" data-id="5" class="btn btn-default editButton">View</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>

如何将数据绑定(bind)到自定义表格？早些时候我用它来将数据绑定(bind)到 GridView

if (!IsPostBack)
        {
            DropDownList1.DataSource = reqSystemData;
            DropDownList1.DataTextField = "SYSTEM_NAME";
            DropDownList1.DataValueField = "SYSTEM_NAME";
            DropDownList1.DataBind();
        }

reqSystemData 是一种 DataTable 类型，我在其中从数据库中获取数据。 如何将此 DataTable 绑定(bind)到也带有分页的自定义表格？

Answer 1

使用 ListView这使您可以通过布局完全控制 HTML，从而允许您应用 Bootstrap classes如你所愿。 Pagination也是可能的。 GridViews 的问题在于您无法控制控件输出的 HTML。这就是引入 ListViews 的动机。绑定(bind)代码与 GridView 的代码没有什么不同。

在 RWD 中呈现表格的最大挑战是您只能使用 320 像素的视口(viewport)，且移动设备优先。这通常意味着在此分辨率下仅显示某些列。