在Twitter Bootstrap Accordion Collapse中加载Ajax表

时间:2013-01-17 11:25:36

标签: jquery twitter-bootstrap accordion

我正在尝试通过ajax加载Twitter崩溃的内容,内容是以Twitter引导标签的形式,其中包含html表格,这适用于第一个标签和第一个可折叠菜单,我想知道什么是通过ajax在Twitter引导程序崩溃中加载标签的最佳方法?这是一个小提琴 http://jsfiddle.net/H36fG/

折叠布局的代码 `               玉米

    </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,我愿意就如何最好地呈现此类数据提出建议

1 个答案:

答案 0 :(得分:0)

我首先要确保只为每个协议加载一次内容,然后使用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);   


                });
            }

    });
});