数据绑定到 asp.net 中的引导表答案

【问题标题】：Databinding to bootstrap table in asp.net数据绑定到 asp.net 中的引导表
【发布时间】：2018-01-16 19:51:52
【问题描述】：

我正在处理一个网络申请表。

目前，我在单击按钮时在网格视图中填充数据库中的数据。我已将页面大小设置为 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 绑定到带有分页的自定义表格？

【问题讨论】：

标签： c# asp.net twitter-bootstrap-3 data-binding pagination

【解决方案1】：

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

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

【讨论】：