首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 如何使用 DataTables 其他页面更新实时数据

更新当前页面(WebSocket)没有问题.
但是，其他页面没有更新，因此筛选器无法正常工作.

进一步说明
大约有2,000个数据实时更新. 如果所有2000个数据都显示在一个页面上，没有分页，则所有数据都会毫无问题地更新，排序过滤器也会每10秒刷新一次，没有任何问题. 问题是当执行分页时，例如，当每页显示100个数据时， 只更新100个数据，其余数据不更新.因此，排序筛选器无法正常工作.


--js代码
每10秒刷新一次(SetInterval)
数字排序定制(DOM-Text-Numeric)

/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function (settings, col) {
    return this.api()
        .column(col, {order: 'index'})
        .nodes()
        .map(function (td, i) {
            return $(td).text() * 1;
        });
};


/* Initialise the table with the required column ordering data types */
$(document).ready(function () {
    var myTable = $('#example').DataTable({
        responsive: true,
        //paging: false,
        pageLength:100,
        columns: [
            null,
            {orderDataType: 'dom-text-numeric'},
            {orderDataType: 'dom-text-numeric'},
            {orderDataType: 'dom-text-numeric'},
        ],
        order: [[1, 'desc']],

    });
    setInterval(function () {
        myTable.rows().invalidate().draw();
    }, 10000);


});

HTML--这是一些呈现的数据.

 <table id="example" class="table table-striped table-bordered dt-responsive nowrap w-100 dataTable no-footer" style="width: 100%;" aria-describedby="example_info">
  <thead>
    <tr>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 442px;">Name</th>
      <th class="sorting sorting_desc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="premium: activate to sort column ascending" style="width: 282px;" aria-sort="descending">premium</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="binance: activate to sort column ascending" style="width: 292px;">binance</th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="upbit: activate to sort column ascending" style="width: 346px;">upbit</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td class="name_DNT-BTC">DNT-BTC</td>
      <td class="premium_DNT-BTC sorting_1">1.0087</td>
      <td class="binanceSpot_DNTBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00000233</td>
      <td class="upbitSpot_BTC-DNT" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00000231</td>
    </tr>
    <tr class="even">
      <td class="name_SNT-BTC">SNT-BTC</td>
      <td class="premium_SNT-BTC sorting_1">1.0072</td>
      <td class="binanceSpot_SNTBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00000138</td>
      <td class="upbitSpot_BTC-SNT" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">-</td>
    </tr>
    <tr class="odd">
      <td class="name_TRX-BTC">TRX-BTC</td>
      <td class="premium_TRX-BTC sorting_1">1.0067</td>
      <td class="binanceSpot_TRXBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00000299</td>
      <td class="upbitSpot_BTC-TRX" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">-</td>
    </tr>
    <tr class="even">
      <td class="name_ETH-USDT">ETH-USDT</td>
      <td class="premium_ETH-USDT sorting_1">1.0053</td>
      <td class="binanceSpot_ETHUSDT" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">1681.08</td>
      <td class="upbitSpot_USDT-ETH" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">1672.2989054</td>
    </tr>
    <tr class="odd">
      <td class="name_ETH-BTC">ETH-BTC</td>
      <td class="premium_ETH-BTC sorting_1">1.0050</td>
      <td class="binanceSpot_ETHBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.073392</td>
      <td class="upbitSpot_BTC-ETH" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">-</td>
    </tr>
    <tr class="even">
      <td class="name_LINK-BTC">LINK-BTC</td>
      <td class="premium_LINK-BTC sorting_1">1.0047</td>
      <td class="binanceSpot_LINKBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.0003658</td>
      <td class="upbitSpot_BTC-LINK" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00036409</td>
    </tr>
    <tr class="odd">
      <td class="name_LRC-BTC">LRC-BTC</td>
      <td class="premium_LRC-BTC sorting_1">1.0047</td>
      <td class="binanceSpot_LRCBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00001917</td>
      <td class="upbitSpot_BTC-LRC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">-</td>
    </tr>
    <tr class="even">
      <td class="name_BNT-BTC">BNT-BTC</td>
      <td class="premium_BNT-BTC sorting_1">1.0040</td>
      <td class="binanceSpot_BNTBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00002527</td>
      <td class="upbitSpot_BTC-BNT" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00002537</td>
    </tr>
    <tr class="odd">
      <td class="name_EOS-BTC">EOS-BTC</td>
      <td class="premium_EOS-BTC sorting_1">1.0025</td>
      <td class="binanceSpot_EOSBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.0000513</td>
      <td class="upbitSpot_BTC-EOS" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00005143</td>
    </tr>
    <tr class="even">
      <td class="name_XRP-BTC">XRP-BTC</td>
      <td class="premium_XRP-BTC sorting_1">1.0025</td>
      <td class="binanceSpot_XRPBTC" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00001574</td>
      <td class="upbitSpot_BTC-XRP" data-bs-toggle="modal" data-bs-target="#bookModal" onclick="setOrderbookPair(this.className)">0.00001578</td>
    </tr>
  </tbody>
</table>

--js-Socket
从Beckend Consumer接收实时数据(通过On-Message.)

 function auto_reconnect_ticker_socket() {
    let ws = new WebSocket(
        'ws://' + window.location.host +
        '/ws/ticker?session_key=${sessionKey}')
    ws.onopen = function () {
        // subscribe to some channels
        ws.send(JSON.stringify({
            //.... some message the I must send when I connect ....
        }));
    };

    ws.onmessage = function (e) {
        let data = JSON.parse(e.data);
        let site = data['site'];
        let type = data['type'];

        if (type == 'ticker') {
            data['data'].forEach((c, i, a) => {
                document.querySelector(`.${site}_${c.symbol}`) && update_price(site, c.symbol, c.price_trade)
                document.querySelector(`.${site}_${c.symbol}`) && update_premium(c.name, c.premium)
                //&& update_price_change_24h(site, c.s, c.o, c.c)
            });
        }


    }

    ws.onclose = function (e) {
        console.log('Ticker Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
        setTimeout(function () {
            auto_reconnect_ticker_socket();
        }, 1000);
    };

    ws.onerror = function (err) {
        auto_reconnect_ticker_socket.error('Socket encountered error: ', err.message, 'Closing socket');
        ws.close();
    };
    return ws
}

有没有办法用DataTables更新其他页面？

推荐答案

您的代码当前正在使用查询 Select 器更新DOM中的数据，例如:

document.querySelector(`.${site}_${c.symbol}`) && update_price(site, c.symbol, c.price_trade)

这将仅更新当前可见页面上的数据的HTML(如您所注意到的).DataTables将不知道有关这些更改的任何信息.

相反，您需要在执行数据更新时使用DataTables API.

要做到这一点，一种方法是使用包含唯一标识符的列-在本例中看起来是列1(索引0)-"name"列.

要更新表中的现有记录，我将使用以下方法.

这里假设每个套接字事件e都有一个名称.如果您得到一个名称数组，则需要调整以遍历每个名称，并在末尾只执行一个draw():

function updateTable(e) {
  let pairData = JSON.parse(e.data);        
  // check if "name" already exists in table:
  var index = table.column( 0, {order:'index'} ).data()
    .indexOf( pairData.name);        
  if (index >= 0) {
    // update the existing row:
    table.row( index, {order:'index'} ).data( pairData ).draw();
  } else {
    // insert a new row:
    table.row.add( pairData ).draw();
  }
}

您将需要针对您的特定JSON内容调整以上内容.我用data表示一行的内容，用name表示每行中的唯一标识符.

indexOf()-在第0列中搜索并定位包含唯一name的行索引(例如DNT-BTC).它使用{order:'index'}来确保返回的值表示DataTables使用的内部分配的索引号(基于初始数据加载顺序)，而不是依赖于筛选和/或排序的索引号.

row().data( newdata )-检索先前找到的索引号的数据行.更新该行的数据.重新绘制表格.

请注意，newdata可以是数组，也可以是对象--这取决于原始数据行是如何在DataTables中创建的.在我的代码中，我假定有一个对象(JSON消息).在您的问题中，您将原始数据显示为直接从初始的HTML提供-因此这将是一个数据数组，而不是一个对象:

[ 'DNT-BTC', 1.0087, 0.00000233, 0.00000231 ]

最后，如果在DataTable中找不到它的键值，我的代码还会插入一个新记录.在你的情况下，你可能不需要这样做.

这种方法的好处是它通过其API在底层DataTable上操作，而不是在DOM上操作，后者可能只显示底层数据的一部分.此外，如果只更改DOM中的值，则任何draw()调用都将导致数据丢失(因为底层DataTables数据中不存在此类DOM更改).

Javascript相关问答推荐

Chart.js V4切换图表中的每个条，同时每个条下有不同的标签.怎么做？

如何在Javascript中的控制台上以一行形式打印循环的结果

单击ImageListItemBar的IconButton后，在Material—UI对话框中显示图像

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新？

如何在coCos2d-x中更正此错误

未定义引用错误：未定义&Quot；而不是&Quot；ReferenceError：在初始化&Quot；之前无法访问'；a'；

使用Nuxt Apollo在Piniastore 中获取产品细节

如何在.NET Core中将chtml文件链接到Java脚本文件？

当我在Reaction中创建一个输入列表时，我的输入行为异常

使用插件构建包含chart.js提供程序的Angular 库？

传递方法VS泛型对象VS事件特定对象

P5JS-绘制不重叠的圆

JAVASCRIPT SWITCH CASE语句：当表达式为'；ALL'；

如何在FiRestore中的事务中使用getCountFromServer

MUI迷你图：如何将$符号添加到MUI迷你图中的工具提示数据

未捕获的不变违规：即使在使用DndProvider之后也应使用拖放上下文

P5play SecurityError：无法从'；窗口'；读取命名属性'；Add'；：阻止具有源的帧访问跨源帧

Reaction-在同一页内滚动导航(下拉菜单)

单击子按钮时将活动切换类添加到父分区

如何在preLoad()中自定义p5.js默认加载动画？

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630