Question

我使用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 -->

代码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中添加表Twitter Bootstrap

1 个答案: