Обновление Div с общим количеством записей за пределами таблицы

Question

Я работаю с таблицами данных и пытаюсь выяснить, что я делаю неправильно. Я пытаюсь отобразить общее количество строк, когда таблица попадает на событие рисования в таблице. Прямо сейчас с кодом, который я покажу ниже, я не получаю никаких ошибок консоли. Элемент, номер которого должен быть обновлен, является правильным. Я просто не получаю его для рендеринга с правильным счетом.

("use strict");

const renderStatusCell = (data, type, full, meta) => {
    const status = {
        0: { title: "Inactive" },
        1: { title: "Active" }
    };
    if (typeof status[data] === "undefined") {
        return data;
    }
    return status[data].title;
};

var table = $('[data-table="users.index"]');

// begin first table
table.DataTable({
    // Order settings
    order: [[1, "desc"]],
    ajax: "/titles",
    columns: [
        { data: "id", title: "User ID" },
        { data: "name", title: "Name" },
        { data: "slug", title: "Slug" },
        { data: "introduced_at", title: "Date Introduced" },
        { data: "is_active", title: "Status", render: renderStatusCell },
        {
            data: "action",
            title: "Actions",
            orderable: false,
            responsivePriority: -1
        }
    ]
});

var updateTotal = function() {
    table.on("draw", function() {
        $("#kt_subheader_total").html(table.fnSettings().fnRecordsTotal());
    });
};

Я ожидал, что при визуализации таблицы будет обновлено dom с правильным количеством строк, однако div не обновляется.

Answer 1

Я считаю, что вам нужно подождать, пока HTML-код загрузится, прежде чем запускать весь ваш код JavaScript.Кроме того, если вы сохраняете сумму, вы не делаете ее функцией, а просто сохраняете значение.

'use strict';

// this will make sure all the HTML loads before the JavaScript runs.
$(function() {
  var table = $('[data-table="users.index"]');
  var updateTotal = null; // store in a variable

  const renderStatusCell = (data, type, full, meta) => {
    const status = {
      0: { title: "Inactive" },
      1: { title: "Active" }
    };

    if (typeof status[data] === "undefined")
        return data;

    return status[data].title;
  };

  // begin first table
  table.DataTable({
    // Order settings
    order: [[1, "desc"]],
    ajax: "/titles",
    columns: [
      { data: "id", title: "User ID" },
      { data: "name", title: "Name" },
      { data: "slug", title: "Slug" },
      { data: "introduced_at", title: "Date Introduced" },
      { data: "is_active", title: "Status", render: renderStatusCell },
      {
        data: "action",
        title: "Actions",
        orderable: false,
        responsivePriority: -1
      }
    ]
  });

  table.on("draw", function() {
    updateTotal = table.fnSettings().fnRecordsTotal();
    $("#kt_subheader_total").html(table.fnSettings().fnRecordsTotal());
  });
});

Answer 2

Я не понимаю вашу проблему, но я думаю, что вам нужно что-то подобное.

table
.row($(this).parents('tr'))
.remove()
.draw();

или

table.ajax.reload();