twitter-bootstrap - 在Grails中添加表Twitter Bootstrap

Question

我使用Twitter Boostrap和Grails构建了这段代码，它们可以完美地工作:我可以显示一个表，可以搜索该表的元素，可以显示10、25个元素(如果我写了所有元素)，并且都可以正常工作。当我尝试在表中添加代码(CODE B)时，信息在表中显示正常，但是我无法搜索表中的元素，并且总是显示所有元素，因此请勿使用标签例如仅显示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 -->