リストとグリッドのあるブートストラップテーブル

Question

リストとグリッドビューのオプションにはブートストラップレスポンステーブルが必要ですが、私はすでに何度も試してみました。ダイビングオプションのみを表示するリストとグリッドビューテーブルデータとリストグリッドビューが必要です。

Answer 1

あなたは

http://www.jqueryscript.net/demo/List-View-Grid-View-Switcher-Plugin-jQuery-simple-list-grid/

ブートストラップサンプルplugingその

のjQueryのプラグインを使用することができます。

https://codepen.io/ajaypatelaj/pen/zIBjJ

サンプルHTML：

<div class="container"> 
    <div class="well well-sm"> 
     <strong>Display</strong> 
     <div class="btn-group"> 
      <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list"> 
      </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span 
       class="glyphicon glyphicon-th"></span>Grid</a> 
     </div> 
    </div> 
    <div id="products" class="row list-group"> 
     <div class="item col-xs-4 col-lg-4"> 
      <div class="thumbnail"> 
       <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner list-group-item-heading"> 
         Product title</h4> 
        <p class="group inner list-group-item-text"> 
         Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           $21.000</p> 
         </div> 
         <div class="col-xs-12 col-md-6"> 
          <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="item col-xs-4 col-lg-4"> 
      <div class="thumbnail"> 
       <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner list-group-item-heading"> 
         Product title</h4> 
        <p class="group inner list-group-item-text"> 
         Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           $21.000</p> 
         </div> 
         <div class="col-xs-12 col-md-6"> 
          <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="item col-xs-4 col-lg-4"> 
      <div class="thumbnail"> 
       <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner list-group-item-heading"> 
         Product title</h4> 
        <p class="group inner list-group-item-text"> 
         Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           $21.000</p> 
         </div> 
         <div class="col-xs-12 col-md-6"> 
          <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="item col-xs-4 col-lg-4"> 
      <div class="thumbnail"> 
       <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner list-group-item-heading"> 
         Product title</h4> 
        <p class="group inner list-group-item-text"> 
         Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           $21.000</p> 
         </div> 
         <div class="col-xs-12 col-md-6"> 
          <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="item col-xs-4 col-lg-4"> 
      <div class="thumbnail"> 
       <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner list-group-item-heading"> 
         Product title</h4> 
        <p class="group inner list-group-item-text"> 
         Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           $21.000</p> 
         </div> 
         <div class="col-xs-12 col-md-6"> 
          <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="item col-xs-4 col-lg-4"> 
      <div class="thumbnail"> 
       <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" /> 
       <div class="caption"> 
        <h4 class="group inner list-group-item-heading"> 
         Product title</h4> 
        <p class="group inner list-group-item-text"> 
         Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
        <div class="row"> 
         <div class="col-xs-12 col-md-6"> 
          <p class="lead"> 
           $21.000</p> 
         </div> 
         <div class="col-xs-12 col-md-6"> 
          <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

を

Answer 2

<table class="table table-bordered table-hover"> 
        <thead> 
        <tr> 
         <th>Country</th> 
         <th>Languages</th> 
         <th>Population</th> 
         <th>Median Age</th> 
         <th>Area (Km²)</th> 
        </tr> 
        </thead> 
        <tbody> 
        <tr> 
         <td>Argentina</td> 
         <td>Spanish (official), English, Italian, German, French</td> 
         <td>41,803,125</td> 
         <td>31.3</td> 
         <td>2,780,387</td> 
        </tr> 
        <tr> 
         <td>Australia</td> 
         <td>English 79%, native and other languages</td> 
         <td>23,630,169</td> 
         <td>37.3</td> 
         <td>7,739,983</td> 
        </tr> 
        <tr> 
         <td>Greece</td> 
         <td>Greek 99% (official), English, French</td> 
         <td>11,128,404</td> 
         <td>43.2</td> 
         <td>131,956</td> 
        </tr> 
        <tr> 
         <td>Luxembourg</td> 
         <td>Luxermbourgish (national) French, German (both administrative)</td> 
         <td>536,761</td> 
         <td>39.1</td> 
         <td>2,586</td> 
        </tr> 
        <tr> 
         <td>Russia</td> 
         <td>Russian, others</td> 
         <td>142,467,651</td> 
         <td>38.4</td> 
         <td>17,076,310</td> 
        </tr> 
        <tr> 
         <td>Sweden</td> 
         <td>Swedish, small Sami- and Finnish-speaking minorities</td> 
         <td>9,631,261</td> 
         <td>41.1</td> 
         <td>449,954</td> 
        </tr> 
        </tbody> 
       </table>