Twitter Bootstrap手风琴折叠中加载Ajax表格

Question

我正在尝试通过ajax加载Twitter collapse的内容，内容以包含HTML表格的Twitter bootstrap标签页形式呈现。这对于第一个标签页和第一个可折叠菜单有效，我想知道在Twitter bootstrap collapse中通过ajax加载标签页的最佳方法是什么？这里有一个例子：http://jsfiddle.net/H36fG/ 收缩布局的代码如下： ` Maize

`

    </div>
    <div id="Maize" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Maize"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="2" data-toggle="collapse" data-parent="#accordion"
        href="#Sorghum">
            Sorghum             </a>

    </div>
    <div id="Sorghum" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Sorghum"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="3" data-toggle="collapse" data-parent="#accordion"
        href="#Wheat">
            Wheat               </a>

    </div>
    <div id="Wheat" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Wheat"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="4" data-toggle="collapse" data-parent="#accordion"
        href="#Rice">
            Rice                </a>

    </div>
    <div id="Rice" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Rice"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="5" data-toggle="collapse" data-parent="#accordion"
        href="#Millet">
            Millet              </a>

    </div>
    <div id="Millet" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Millet"
        class="btn btn-link">See More</a>   
    </div>
</div>
<div class="accordion-group">
    <div class="accordion-heading"> <a class="accordion-toggle" id="6" data-toggle="collapse" data-parent="#accordion"
        href="#Beans">
            Beans               </a>

    </div>
    <div id="Beans" class="accordion-body collapse">
        <div class="accordion-inner"></div> <a href="http://dev.ratin.net/core/index.php/site/product/Beans"
        class="btn btn-link">See More</a>   
    </div>
</div>

带有选项卡的加载的HTML表格如下：

<ul class="nav nav-tabs" id="product-table">


<li><a href="#1" data-toggle="tab">Grade 1</a>
  </li>
  <li><a href="#2" data-toggle="tab">Grade 2</a>
  </li>
  <li><a href="#3" data-toggle="tab">Grade 3</a>
  </li>
</ul>
<div class="tab-content">
  <div>
    <div class="tab-pane" id="1">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>NFRA MPANDA RUKWA</td>
            <td>487</td>
            <td>487.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>COTCORI Cooperative</td>
            <td>113</td>
            <td>113.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>ENAS GBC KIREHE</td>
            <td>131</td>
            <td>131.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Government Procurement and Supply Agent</td>
            <td>453</td>
            <td>453.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Nairobi(test)</td>
            <td>261</td>
            <td>250.00</td>
            <td>IN</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <div class="tab-pane" id="2">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>National Food Reserve Agency_Manyoni</td>
            <td>172</td>
            <td>172.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Sodea GBC</td>
            <td>471</td>
            <td>20.00</td>
            <td>OUT</td>
          </tr>
          <tr>
            <td>Kivu Maize Factory</td>
            <td>389</td>
            <td>389.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Mombasa Bulk Grain Handlers</td>
            <td>200</td>
            <td>200.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Zwii Enterprises-Muloza</td>
            <td>-47</td>
            <td>47.00</td>
            <td>OUT</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div>
    <div class="tab-pane" id="3">
      <table class="table table-condensed table-bordered table-striped volumes">
        <thead>
          <tr>
            <th>Warehouse</th>
            <th>Grain Volume</th>
            <th>Trade Volume</th>
            <th>Direction</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>COTCORI Cooperative</td>
            <td>93</td>
            <td>93.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>SOSOMA GBC KICUKIRO</td>
            <td>-23</td>
            <td>23.00</td>
            <td>OUT</td>
          </tr>
          <tr>
            <td>Shabiby_Indivisual</td>
            <td>270</td>
            <td>270.00</td>
            <td>IN</td>
          </tr>
          <tr>
            <td>Silayo_Union Service Stores</td>
            <td>-38</td>
            <td>38.00</td>
            <td>OUT</td>
          </tr>
          <tr>
            <td>SGR/NFRA VWAWA</td>
            <td>-39</td>
            <td>39.00</td>
            <td>OUT</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我正在使用Twitter Bootstrap 2.2和Jquery 1.8.3，希望能得到关于如何更好地展示这些数据的建议。

- Paul Ngumii

---

我建议保持现状（即点击加载），但在其中加入一个加载动画以平滑用户体验。例如，您单击后，加载动画出现，一旦Ajax调用返回，您隐藏动画并显示数据。 - JBeagle

Answer 1

我首先会确保每个手风琴只加载一次内容，然后使用Ajax回调来应用选项卡设置等。

另外，对于您的选项卡命名约定（我看到您正在使用<div id="1">），我建议不要使用数字作为ID，因为我曾经看到这会导致JS/JQ出现问题，所以也许可以使用#tabs-one、#tabs-two等。

这里是一个快速示例：

$(document).ready(function() {      
        $('.accordion-toggle').on('click', function () {

            var parentRef     = $(this).attr('href'),
                $innerContent = $(parentRef).find('.accordion-inner');            

            //only load group once
            if($innerContent.text() ===''){
                $innerContent.load('http://fiddle.jshell.net/NPpHm/show/', function(){

                    var $this      = $(this),
                        $innerTabs = $this.find('.nav-tabs');

                    console.log($innerTabs);

                     var tabOpts = {
                            active: 0,                            
                            cookie: {expires: 3},
                            show:  onTabShow,            
                            fillSpace: false,
                            autoHeight: true,
                            collapsible: false
                        };


                    $innerTabs.tabs(tabOpts).fadeIn(700);   


                });
            }

    });
});

- Steven Britton