2017-08-09 21 views
2

我正在處理一個web應用程序表單。數據綁定到asp.net中的引導表

目前,我在按鈕單擊的網格視圖中填充數據庫中的數據。我已將頁面大小設置爲5,每次顯示5行。

enter image description here

,這裏是上述PIC

<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行,它應顯示空行。否則,其餘行將出現在網格視圖中的下一頁上。

像這樣的事情

enter image description here

<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是其中我從DB中獲取數據類型數據表。 如何將此DataTable綁定到具有分頁功能的自定義表格?

回答

0

使用ListView可讓您通過佈局完全控制HTML,因此您可以根據需要應用Bootstrap classesPagination也是可能的。 GridViews的問題是,您無法控制該控件輸出的HTML。這是引入ListViews的動機。綁定的代碼與GridView沒有區別。

在RWD中呈現表格的最大挑戰是,您僅限於首先使用移動設備的320像素視口。這通常意味着在此分辨率下僅顯示某些列。