asp.netのブートストラップテーブルへのデータバインディング

Question

私はWebアプリケーションフォームで作業しています。

現在、私はデータベースからのデータをボタンクリックのグリッドビューに取り込みます。私は毎回5行を表示するためにページサイズを5に設定しました。

、ここで上記の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行未満のデータがある場合は、空の行が表示されます。それ以外の場合は、グリッドビューのように次のページに残りの行が表示されます。

私はカスタムテーブルにデータをバインドすることができますどのようにこの

<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をページ設定付きカスタム作成テーブルにバインドする方法もありますか？

Answer 1

ListViewを使用すると、レイアウト経由でHTMLを完全に制御できるため、希望通りにBootstrap classesを適用することができます。 Paginationも可能です。 GridViewの問題は、コントロールによって出力されるHTMLを制御できないことです。これがListViewの導入の動機となりました。バインディングのコードは、GridViewのコードと変わりありません。

RWDでテーブルを表示する際の最大の課題は、モバイルで最初に320pxのビューポートに限定されていることです。これは、この解像度で特定の列のみを表示することを意味します。