Блог

Когда я добавляю данные в DataTable, как это:

 cart.row.add([
    `<a href="${product.url}">
        <img src="${product.image.url}" alt="${product.image.slug}">
    </a>
    `,
    `<a href="${product.url}">${product.name}</a>`,
    product.price,
    `<div class="cart-plus-minus">
        <input class="cart-plus-minus-box" type="text" name="qtybutton" data-product="${key}"    value="${product.quantity}">
     </div>`,
    Number(product.price) * Number(product.quantity),
    `<a href="#"><i class="la la-pencil"></i></a>
    <a data-action="remove-from-cart" data-product="${key}" href="javascript:void(0)"><i class="la    la-close"></i></a>`,
]).draw();
 

И создайте его таким образом:

 const classArray = [
    "product-thumbnail",
    "product-name",
    "product-price-cart",
    "product-quantity",
    "product-subtotal",
    "product-remove",
];
cart = new DataTable("#cart", {
  columns: [
    { className: "product-thumbnail" },
    { className: "product-name" },
    { className: "product-price-cart" },
    { className: "product-quantity" },
    { className: "product-subtotal" },
    { className: "product-remove" },
  ],
  createdCell: function (td, cellData, rowData, row, col) {
    $(td).addClass(classArray[col]);
  },
  language: {
    decimal: ",",
    emptyTable: "Gösterilecek ürün yok.",
    info: "Toplam _TOTAL_ ürünün _START_-_END_ aralığı gösteriliyor",
    infoEmpty: "Gösterilecek ürün yok.",
    infoFiltered: "(filtered from _MAX_ total entries)",
    infoPostFix: "",
    thousands: ",",
    lengthMenu: "_MENU_ tane ürün göster",
    loadingRecords: "Yükleniyor...",
    processing: "İşleniyor...",
    search: "Arama",
    zeroRecords: "Aradığınız ürün(ler) bulunumadı.",
    paginate: {
      first: "İlk",
      last: "Son",
      next: "Sonraki",
      previous: "Önceki",
    },
    aria: {
      sortAscending: ": artan şekilde sıralamak için tıklayın",
      sortDescending: ": azalan şekilde sıralamak için tıklayın",
    },
  },
});
 

В ячейках действительно есть классы, но CSS этих классов не применяется к дочерним элементам ячейки. Например, у меня есть элемент изображения, который не был применен ни к одному CSS из класса. Обычно проблема заключается в том, что ширина не применяется к элементам и скриптам, которые изменяют элементы, не запускаемые при добавлении ячеек. Как я могу заставить динамически добавляемые элементы визуализироваться с помощью CSS и запускать соответствующие сценарии, связанные с ним?