具有多个数据源的数据表

Question

我有两个数据源。一个来自 ajax 来自服务器，第二个来自 websocket 实时数据。下面是我的 html

<div class="card-body">
                        <div class="table-responsive">
                            <table id="TenantsTable" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>@L("Symbol")</th>
                                        <th>@L("Pair")</th>
                                        <th>@L("Fact")</th>
                                        <th>@L("SignalDate")</th>
                                        <th>@L("SignalPrice")</th>
                                        <th>@L("LastPrice")</th>
                                        <th>@L("Change")</th>
                                        <th>@L("sltp")</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>

下面是我的数据表

abp.ajax({
        method: 'POST',
        url: abp.appPath + 'Portfolio/GetSignalsByPeriod/',
        data: JSON.stringify(PeriodId),
        dataType: 'json',
        contentType: 'application/json',

    }).done(function (result) {

        myData = result;
        var _$tenantsTable = $('#TenantsTable').DataTable({
            datatype: 'json',
            "searching": true,
            "ordering": true,
            data: myData,
            columns: [
                { data: 'symbol' },
                { data: 'pair' },
                { data: 'signal' },
                {
                    data: 'signalDate',
                    render: function (data, type, row) {
                        return moment(new Date(data).toString()).format('DD/MM/YYYY - h:mm:ss');
                    }

                },
                { data: 'signalPrice' },
                {
                    title: 'Last Price', data: null,
                    render: function (data, type, row, meta) {
                        return 1
                    }
                },
                {
                    title: 'Change', data: null,
                    render: function (data, type, row, meta) {
                        return 2
                    }
                },
                {
                    title: 'SL/TP', data: null,
                    render: function (data, type, row, meta) {
                        return 3
                    }
                },

            ],

            buttons: [
                {
                    name: 'refresh-usdt',
                    text: 'USDT',
                    action: function (e, dt, node, config) {
                        dt.column(1).search("USDT").draw();
                    }
                },
                {
                    name: 'refresh-btc',
                    text: 'BTC',
                    action: function (e, dt, node, config) {
                        dt.column(1).search("BTC").draw();
                    }
                },
            ],

        });

    })
    let url = 'wss://stream.binance.com:9443/ws/!ticker@arr';
    let ws = new WebSocket(url)
    ws.onmessage = (event) => {
        var _$tenantsTable = $('#TenantsTable').DataTable();
        var dataWs = JSON.parse(event.data)
        for (let data of dataWs) {
            var selectedRow = _$tenantsTable.rows({ search: data.s }).indexes();
            console.log(selectedRow);
            _$tenantsTable.cell(selectedRow, 5).data(data.c);
        }
       
    }

我想要做的是用这些实时数据填充最后价格、变化和 SL/TP 列。如果符号和货币对与来自 websocket 的符号匹配，它应该显示其当前价格、更改和 sl/tp。我不知道是否有更好的方法或更简单的方法来做到这一点。但是我卡住了。

Answer 1

下面回答了我的问题，如果其他人需要答案。 https://itguytec.com/2021/12/16/datatables-with-binance-real-time-data/

具有多个数据源的数据表

DataTables with multiple data sources

jquery

datatables