向数据表添加排名

Question

我正在尝试根据数据中的总点数计算排名table

Javascript 正在获取正确的值并在控制台中正确排名，但是它没有将值放入数据中table

 $(function() {

        var table=$('#points-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: 'http://localhost/edpark/public/get/points',
            columns: [
                { data: 'rank', defaultContent: ''},
                { data: 'first_name'},
                { data: 'last_name'},
                { data: 'TotalPoints'},
            ],
                drawCallback: function () {
                api = this.api();
                var arr = api.columns(3).data()[0];  //get array of column 3 (extn)
                console.log(arr);
                var sorted = arr.slice().sort(function(a,b){return b-a});
                var ranks = arr.slice().map(function(v){ return sorted.indexOf(v)+1 });
                console.log(sorted);
                console.log(ranks);
                // interate through each row
                api.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                    var data = this.data();
                    var rank = ranks[rowLoop];
                    data.rank = ranks[arr.indexOf(data.extn)];  //set the rank column = the array index of the extn in the ranked array
             } );
        api.rows().invalidate();
        }
        });
    })

我的 dev table 中有 3 行，它们的总分分别为 60、10、5，它们被正确地写入控制台，并且排名为 1、2、3

但是在我的 table 中，Rank 字段仍然是空白的。

谢谢

编辑

添加请求的HTML代码和数据集

HTML

@extends('layouts.app')

@section('content')
<div class="container-fluid">
    @if(session()->has('success'))
        <div class="row">
            <div class="col-12 alert alert-success" role="alert">
                <strong>{{session()->get('success')}}</strong>
            </div>
        </div>
    @endif
    @if(session()->has('failure'))
        <div class="row">
            <div class="col-12 alert alert-danger" role="alert">
                <strong>{{session()->get('failure')}}</strong>
            </div>
        </div>
    @endif
    <div class="row">
        <div class="col-lg-12 col-sm-12">
            <div class="card">
                <div class="card-body">
                    <h3 class="text-center">Points Report</h3>

                    <div class="table-responsive">
                        <table class="table table-striped table-no-boreded table-hover" width="100%" id="points-table">
                            <thead class = "text-primary">
                            <h4> </h4>
                                <tr>
                                    <th class="text-center">Rank</th>
                                    <th class="text-center">First Name</th>
                                    <th class="text-center">Last Name</th>
                                    <th class="text-center">Total Points</th>
                                    <th width="10%"></th>
                                </tr>
                            </thead>
                            <tbody class = "text-center">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

数据集

Member_id| Points | Reason |
    1        10       --
    5        60       --
    4        10       --
    1        -5       --

希望对您有所帮助

Answer 1

当您执行诸如添加或删除行、更改 table 的排序、筛选或分页特征等操作时，您需要 DataTables 更新显示以反映这些更改。
api.draw() >>> 此功能就是为此目的而提供的

Answer 2

通过将以下内容添加到我的查询中解决了这个问题

SelectRaw->("RANK () OVER (ORDER BY SUM(points.value) DESC) 'rank'")

然后我可以在DataTable中正常调用排名数据

向数据表添加排名

Adding Ranking to Datatables

javascript

datatables