绑定到asp.net中的引导表

Question

我正在处理Web应用程序表单。

当前，我在单击按钮的网格视图中填充数据库中的数据。 我已将页面大小设置为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>

但是我不想使用网格视图，而是想在引导程序中创建具有固定行数和分页数的自定义表，而不是在运行时生成它，然后在该表中填充数据。 如果数据少于5行，则应显示空行。 否则，其余行应像在网格视图中一样显示在下一页上。

像这样

<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>

如何将数据绑定到自定义表？ 之前我用它来将数据绑定到网格视图

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

reqSystemData是DataTable类型，其中我正在从DB中获取数据。 如何也通过分页将此DataTable绑定到定制表？

Answer 1

使用ListView ，它使您可以通过Layout完全控制HTML，从而使您可以根据需要应用Bootstrap类 。 分页也是可能的。 GridViews的问题在于您无法控制该控件输出的HTML。 这就是引入ListViews的动机。 用于绑定的代码与用于GridViews的代码没有什么不同。

在RWD中显示表格的最大挑战是，您只能使用移动设备来限制320px的视口。 这通常意味着仅以此分辨率显示某些列。