Datatables.net + полоса?

Привет, я пытаюсь интегрировать кнопку оплаты Stripe в свою таблицу Datatables.net.

Есть ли способ передать определенные переменные из ячейки в API кнопки Stripe?

Datatables.net + полоса?

Мой текущий JavaScript

  window.onmousedown = function(){

    for (var i=0; i<orderHistory.length; i++){

        for (var k=0; k<orderHistory[i].length; k++){
      var PN =  (orderHistory[i][k].overall_usd_price * 100)
  
  var priceN = parseFloat(PN)

  console.info(PN)
  
  document.getElementById('card_class').addEventListener('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'omega',
      description: 'Credit / Debit Card Payment',
      zipCode: true,
      amount: priceN
    });
    e.preventDefault();
  });
  
}
}
  // Close Checkout on page navigation:
  window.addEventListener('popstate', function() {
    handler.close();
    
  })
  }

И ниже показано, как я создаю таблицы

window.onload = function(){

var items = [] 

var tableDiv = document.getElementById("clientorders"); 

var table = document.createElement('table');
table.setAttribute('id', 'datatable-buttons');
table.setAttribute('class', 'table table-flush');

var thead = document.createElement('thead');
var tbody= document.createElement('tbody');  
var tr = document.createElement('tr');

table.appendChild(thead);


//create header
thead.appendChild(tr);

var heading = [
    "Order Date",
    "Order Time",
    "Username", 
    "Email", 
    "Phone No.", 
    "Payment Type",
    "Order Summary",
    "Order Gross",
    "Order Cost",
    "Order Net",
    "Order Status",
    "Confirmed Date", 
    "Confirmed Time", 
    "Order Length",  
    "Confirmed Exp Date" , 
    "Confirmed Exp Time" , 
    "Order Remainder",
    "Order ID",

];

for (var col = 0; col<heading.length; col++)
{
  
  var th = 
document.createElement('th');

thead.appendChild(th); 
  th.appendChild(document.createTextNode(heading[col]));
  tr.appendChild(th);
}


// table content

table.appendChild(tbody);

for (var i=0; i<orderHistory.length; i++){

for (var k=0; k<orderHistory[i].length; k++){

    var tr = document.createElement('TR');  
        var td1 = document.createElement('TD');
        var td2 = document.createElement('TD');
        var td3 = document.createElement('TD');
        var td4 = document.createElement('TD');
        var td5 = document.createElement('TD');
        var td6 = document.createElement('TD');
        var td7 = document.createElement('TD');
        var td8 = document.createElement('TD');
        var td9 = document.createElement('TD');
        var td10 = document.createElement('TD');
        var td11 = document.createElement('TD');
        var td12 = document.createElement('TD');
        var td13 = document.createElement('TD');
        td13.setAttribute('class', 'text-center')
        var td14 = document.createElement('TD');
        var td15 = document.createElement('TD');
        var td16 = document.createElement('TD');
        var td17 = document.createElement('TD');
        var td18 = document.createElement('TD');

// if statements

var btchr = orderHistory[i][k].btc_hr
var btcpwr = orderHistory[i][k].btc_pwr
var btcpkglength = orderHistory[i][k].btc_pkg_length

var xmrhr = orderHistory[i][k].xmr_hr
var xmrpwr = orderHistory[i][k].xmr_pwr
var xmrpkglength = orderHistory[i][k].xmr_pkg_length

var ethhr = orderHistory[i][k].eth_hr
var ethpwr = orderHistory[i][k].eth_pwr
var ethpkglength = orderHistory[i][k].eth_pkg_length

var ltchr = orderHistory[i][k].ltc_hr
var ltcpwr = orderHistory[i][k].ltc_pwr
var ltcpkglength = orderHistory[i][k].ltc_pkg_length

var zechr = orderHistory[i][k].zec_hr
var zecpwr = orderHistory[i][k].zec_pwr
var zecpkglength = orderHistory[i][k].zec_pkg_length


        if (btcpkglength != null){
            btcpkglength = btcpkglength + " days"
        }
        if (btcpkglength == null){
            btcpkglength = " "
        }

        if (xmrpkglength != null){
            xmrpkglength = xmrpkglength + " days"
        }
        if (xmrpkglength == null){
            xmrpkglength = " "
        }

        if (ethpkglength != null){
            ethpkglength = ethpkglength + " days"
        }
        if (ethpkglength == null){
            ethpkglength = " "
        }

        if (ltcpkglength != null){
            ltcpkglength = ltcpkglength + " days"
        }
        if (ltcpkglength == null){
            ltcpkglength = " "
        }

        if (zecpkglength != null){
            zecpkglength = zecpkglength + " days"
        }
        if (zecpkglength == null){
            zecpkglength = " "
        }


        if (btchr != null){
            btchr = btchr + " TH/s for BTC @ " + btcpwr + "w power consumption"
        }
        if (btchr == null){
            btchr = " "
        }

        if (xmrhr != null){
            xmrhr = xmrhr + " h/s for XMR @ " + xmrpwr + "w power consumption"
        }
        if (xmrhr == null){
            xmrhr = " "
        }

        if (ethhr != null){
            ethhr = ethhr + " MH/s for ETH @ " + ethpwr + "w power consumption"
        }
        if (ethhr == null){
            ethhr = " "
        }

        if (ltchr != null){
            ltchr = ltchr + " MH/s for LTC @ " + ltcpwr + "w power consumption"
        }
        if (ltchr == null){
            ltchr = " "
        }

        if (zechr != null){
            zechr = zechr + " Sol/s for ZEC @ " + zecpwr + "w power consumption"
        }
        if (zechr == null){
            zechr = " "
        }     



        var today = moment();
        var orderdateexp = moment('4/24/2019')

    // ecmascript 6 version of summary
    var hr = (btchr + xmrhr + ethhr + ltchr + zechr);
    var length = (btcpkglength + xmrpkglength + ethpkglength + ltcpkglength + zecpkglength);
    //    var remainder = orderHistory[i][k].order_confirm_exp_date_time.diff(today, 'days')
    var ordercost = '$300.00'

    var date = '04-28-2022'; // Month/day/year
    var time = '19:28';
    var order_confirm_exp_date_time=(moment(date, 'MM-DD-YYYY').format('MMMM D'))
    var remainder = (orderdateexp.diff(today, 'days') + ' days')


  

    // table variables


    var price = ('$' + orderHistory[i][k].overall_usd_price + '.00')


    var priceU = parseInt(price.replace(/\$|,/g, ''))
    var ordercostU = parseInt(ordercost.replace(/\$|,/g, ''))

    var ordernet = '$' + ((priceU - ordercostU)).toFixed(2)

    var priceNumber = (orderHistory[i][k].overall_usd_price + .00)

    var status = orderHistory[i][k].status


    var paymentID = orderHistory[i][k].payment_id;

    var paymentMethod = orderHistory[i][k].paymentMethod;

    var statusbtn = document.createElement('span');

    if (orderHistory[i][k].paymentMethod === 'card' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';
        statusbtn.setAttribute('class', 'confirmed');
        paymentMethod = 'Credit / Debit Card'
        method = paymentMethod
    }
    
    if (orderHistory[i][k].paymentMethod === 'crypto' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';
        statusbtn.setAttribute('class', 'confirmed');
        paymentMethod = 'Cryptocurrency Transfer'
        method = paymentMethod
        }
    
    if (orderHistory[i][k].paymentMethod === 'wire' && orderHistory[i][k].status === true) {
        statusbtn.innerHTML = 'Confirmed';;
        statusbtn.setAttribute('class', 'confirmed');
        var method = 'Wire Transfer ID ' + paymentID
    }
    
    if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        statusbtn.setAttribute("id", "card_class");
        statusbtn.setAttribute('class', 'btn btn-warning');
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
    }
    
    if (orderHistory[i][k].paymentMethod === 'crypto' & orderHistory[i][k].status === false) {
        var paymentMethod = 'Crypto'
        var method = paymentMethod
        var statusbtn =document.createElement("button");
    
        statusbtn.setAttribute("onclick", "location.href='/crypto'");
        statusbtn.setAttribute("id", "crypto_class");
        statusbtn.setAttribute("href", "/crypto");
        statusbtn.setAttribute('class', 'btn');
        statusbtn.appendChild(document.createTextNode("Pay with Crypto"));
    }
    
    if (orderHistory[i][k].paymentMethod === 'wire' && orderHistory[i][k].status === false) {
        statusbtn.setAttribute('class', 'unconfirmed');
        var method = 'Wire Transfer ID ' + paymentID
        statusbtn.innerHTML = 'Unconfirmed';
    }



        
        td1.appendChild(document.createTextNode(orderHistory[i][k].order_date_time.split('T')[0]));
        td2.appendChild(document.createTextNode(orderHistory[i][k].order_date_time.split('T')[1].split('.')[0]));
        td3.appendChild(document.createTextNode(user[i].username));
        td4.appendChild(document.createTextNode(user[i].email));
        td5.appendChild(document.createTextNode(user[i].tel));
        td6.appendChild(document.createTextNode(method));
        td7.appendChild(document.createTextNode(hr));
        td8.appendChild(document.createTextNode(price));
        td9.appendChild(document.createTextNode(ordercost));
        td10.appendChild(document.createTextNode(ordernet));
        td11.appendChild(statusbtn);
        // td12.appendChild(document.createTextNode(order_confirm_date_time))
        //td12.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_date_time.split('T')[0]));
        //td13.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_date_time.split('T')[1].split('.')[0]));
        td14.appendChild(document.createTextNode(length));
        //td15.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_exp_date_time.split('T')[0]));
        //td16.appendChild(document.createTextNode(orderHistory[i][k].order_confirm_exp_date_time.split('T')[1].split('.')[0]));
        td17.appendChild(document.createTextNode(remainder));
        td18.appendChild(document.createTextNode(orderHistory[i][k]._id));




        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        tr.appendChild(td7);
        tr.appendChild(td8);
        tr.appendChild(td9);
        tr.appendChild(td10);
        tr.appendChild(td11);
        tr.appendChild(td12);
        tr.appendChild(td13);
        tr.appendChild(td14);
        tr.appendChild(td15);
        tr.appendChild(td16);
        tr.appendChild(td17);
        tr.appendChild(td18);


        tbody.appendChild(tr);

    }
}




tableDiv.appendChild(table)

}
                h3.mb-0 All Orders
                p.text-sm.mb-0
                  | This is a data log of all omega orders. This includes the date of order, expiration, cryptocurrency, hashrate, cost, payment options.
              .table-responsive.py-4#clientorders

Больше бреда...

Больше бреда...

Больше бреда...

Больше бреда...

Больше бреда...

Больше бреда...

Больше бреда...

Больше бреда...

Больше бреда...

Можете подробнее рассказать о том, какие данные вы хотите передать в опции оформления заказа (stripe.com/docs/checkout#интеграция-простые-опции)? stripe.com/docs/checkout#интеграция-простые-опции описывает все доступные настраиваемые параметры, которые вы можете там сделать.

wsw 18.03.2019 08:18

@wsw мне просто нужно, чтобы цена передавалась сумме для полосы, но в зависимости от того, какую кнопку строки я выбираю

knitty 18.03.2019 22:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
87
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы не должны использовать идентификатор для нескольких элементов, так как getElementById получит только первый найденный элемент, вместо этого используйте класс или вы можете связать событие onclick после создания элемента кнопки

Так что попробуй изменить это

if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        statusbtn.setAttribute("id", "card_class");
        statusbtn.setAttribute('class', 'btn btn-warning');
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
    }

в

if (orderHistory[i][k].paymentMethod === 'card' && status === false) {
        var paymentMethod = 'Credit / Debit Card'
        var method = paymentMethod
        var statusbtn = document.createElement("button");
        // statusbtn.setAttribute("id", "card_class"); // -> remove this
        statusbtn.setAttribute('class', ' card_class btn btn-warning');
        statusbtn.setAttribute('data-customdata', 'some-data'); // -> you can pass your data by using element data attribute (with data- prefix)
        statusbtn.appendChild(document.createTextNode("Pay with Card"));
        // bind onclick event
        statusbtn.addEventListener('click', function(e) {
           e.preventDefault();
           // get your data using dataset (your 'customdata' will be available as datasets property ) like this :
           var data = this.datasets.customdata;
           // do other task here 
        });
    }

пробую это сейчас, это имеет смысл с частью идентификатора, я забыл, что они должны быть уникальными

knitty 18.03.2019 22:28

черт возьми, это сработало, я выложу здесь свою версию решения, большое спасибо, чувак !!!!

knitty 18.03.2019 23:14

Другие вопросы по теме