在 Grails 中添加 table Twitter Bootstrap

Question

我使用 Twitter Boostrap 和 Grails 构建的这段代码完美运行：我可以显示 table，我可以搜索 table 的元素，我可以显示 10、25 个元素（如果我写了所有的元素），并且一切正常。当我尝试在 table (CODE B) 中添加代码时，信息在 table 中显示正常，但我无法搜索 table 中的元素并且总是我展示了所有的元素，不要让标签只显示 10 个，例如。

代码 A

<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                DataTables Advanced Tables
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Sku</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Trident</td>
                                <td>Internet Explorer 4.0</td>
                                <td>Win 95+</td>
                            </tr>
                            <tr>
                                <td>Gecko</td>
                                <td>Mozilla 1.0</td>
                                <td>Win 95+ / OSX.1+</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- /.table-responsive -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

代码 B

<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                DataTables Advanced Tables
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Sku</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <g:each in="${allProducts}" var="thisProduct">
                        <tbody>
                        <tr>
                            <td>${thisProduct.name}</td>
                            <td>${thisProduct.sku}</td>
                            <td>${thisProduct.price}</td>
                        </tr>
                        </tbody>
                        </g:each>
                    </table>
                </div>
                <!-- /.table-responsive -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
    <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

Answer 1

我认为你的每个标签放错了地方，你不应该重复 tbody 元素。

试试下面的代码，我把标签移到了tbody里面。

<!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        DataTables Advanced Tables
                    </div>
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Sku</th>
                                        <th>Price</th>
                                    </tr>
                                </thead>

                                  <tbody>
                                   <g:each in="${allProducts}" var="thisProduct">
                                    <tr>
                                        <td>${thisProduct.name}</td>
                                        <td>${thisProduct.sku}</td>
                                        <td>${thisProduct.price}</td>
                                    </tr>
                                   </g:each>
                                  </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->

在 Grails 中添加 table Twitter Bootstrap

Add table Twitter Bootstrap in Grails

grails

twitter-bootstrap