Twitter bootstrap 在Grails中添加表Twitter引导

我用Twitter Boostrap和Grails构建了这段代码，它们工作得非常完美：我可以显示一个表，我可以搜索表中的元素，我可以显示10个、25个元素（如果我编写所有元素的话），所有这些都工作得很好。当我尝试在表中添加代码（代码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 -->

数据表高级表
名称
Sku
价格
三叉戟
Internet Explorer 4.0
赢得95分+
壁虎
Mozilla 1.0
Win 95+/OSX.1+

代码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 -->

数据表高级表
名称
Sku
价格
${thisProduct.name}
${thisProduct.sku}
${thisProduct.price}

我认为您的每个标签都放错了位置，您不应该重复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 -->

数据表高级表
名称
Sku
价格
${thisProduct.name}
${thisProduct.sku}
${thisProduct.price}

您所说的“搜索”是什么意思<浏览器中的code>Ctrl+F？否，该表有一个标签，您可以在其中搜索自己表中的某些元素。看看这个链接。表格代码来自这里。。。。我的问题是在哪里添加groovy代码。在完美工作之前，我给你的链接也是如此