【问题标题】:sort for dataTable排序数据表
【发布时间】:2018-11-26 05:39:42
【问题描述】:

我正在尝试对数据表进行排序,但是我不明白该怎么做。让我展示一下我厌倦了如何处理我的代码。

$(document).ready(function() {
            $('#table').DataTable();
        } );
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" type="text/css" media="all" />

     <table  id="table" class="display" style="width:100%">
              <thead>
                        <tr>
                          <th>Stock</th>
                          <th>Rate</th>
                        </tr>
              </thead>

        @if($trades)
            @foreach($trades as $trade)

                  <tbody>
                    <tr>
                      <td>{{$trade->stock}}</td>
                      <td>{{$trade->rate}}</td>
                    </tr>
                  </tbody>
            @endforeach
        @endif

    </table>

我努力工作,但找不到我没有做的事情。

【问题讨论】:

    标签: javascript laravel datatable datatables laravel-5.3


    【解决方案1】:

    我认为您需要将您的 @foreach 移动到您的 &lt;tbody&gt; 中,如下所示:

                 <tbody>
                    @foreach($trades as $trade)
                    <tr>
                      <td>{{$trade->stock}}</td>
                      <td>{{$trade->rate}}</td>
                    </tr>
                    @endforeach
                 </tbody>
    

    要使排序正常工作,您必须像这样在 javascript 中添加一个选项:

    $(document).ready(function() {
        $('#table').DataTable( {
            "order": [[ 3, "desc" ]]
        } );
    } );
    

    它将按第 4 列对您的表进行排序(因为上例中的 3 从 0 开始计算索引)以降序排列。参考——https://datatables.net/examples/basic_init/table_sorting.html

    【讨论】:

    • @KinnariPrajapati 我添加了一个示例,说明如何使用上面的 dataTable javascrpt 库进行排序。如果您不需要动态更新表格,您也可以先使用 php 对$trades 进行排序。
    • 非常感谢。我认为我在@foreach 中是错误的。无论如何,非常感谢,@user3089840
    猜你喜欢
    • 1970-01-01
    • 2016-02-21
    • 2017-06-19
    • 2012-05-14
    • 2014-05-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多