Question

我想在最后一个名为factuur的datarecord上获得一个按钮。我想在那里得到一个div或按钮，但我怎么能在像这样的数据数组中这样做而不是“在这里”我想显示按钮。如果我现在将<div>放在那里它显示为文本我希望它显示为HTML。

  <table  id="oTable" border="1" class="table_tag">

  <tr><thead>
    <th>Ordernummer</th>
    <th>Besteldatum</th>
    <th>BTW</th>
    <th>Totaalbedrag</th>
    <th>Status</th>
    <th>Verzonden</th>
    <th>Factuur</th>
  </thead></tr>
 </table>

脚本：

$(function(){
  // Basic Setup
  var $tableSel = $('#oTable');
  $tableSel.dataTable({
    'aaData': data,
    'aoColumns': [
      {'mData': 'EAN'},
      {'mData': 'Besteldatum'},
      {'mData': 'BTW'},
      {'mData': 'Totaalbedrag'},
      {'mData': 'Status'},
      {'mData': 'Verzonden'},
      {'mData': 'Factuur'}
    ],
    'sDom': ''
  });

  $('#filter').on('click', function(e){
    e.preventDefault();
    var startDate = $('#start').val(),
        endDate = $('#end').val();

    filterByDate(1, startDate, endDate);

    $tableSel.dataTable().fnDraw();
  });

  // Clear the filter. Unlike normal filters in Datatables,
  // custom filters need to be removed from the afnFiltering array.
  $('#clearFilter').on('click', function(e){
    e.preventDefault();
    $.fn.dataTableExt.afnFiltering.length = 0;
    $tableSel.dataTable().fnDraw();
  });

});

/* Our main filter function
 * We pass the column location, the start date, and the end date
 */
var filterByDate = function(column, startDate, endDate) {
  // Custom filter syntax requires pushing the new filter to the global filter array
        $.fn.dataTableExt.afnFiltering.push(
            function( oSettings, aData, iDataIndex ) {
                var rowDate = normalizeDate(aData[column]),
              start = normalizeDate(startDate),
              end = normalizeDate(endDate);

          // If our date from the row is between the start and end
          if (start <= rowDate && rowDate <= end) {
            return true;
          } else if (rowDate >= start && end === '' && start !== ''){
            return true;
          } else if (rowDate <= end && start === '' && end !== ''){
            return true;
          } else {
            return false;
          }
        }
        );
    };

// converts date strings to a Date object, then normalized into a YYYYMMMDD format (ex: 20131220). Makes comparing dates easier. ex: 20131220 > 20121220
var normalizeDate = function(dateString) {
  var date = new Date(dateString);
  var normalized = date.getFullYear() + '' + (("0" + (date.getMonth() + 1)).slice(-2)) + '' + ("0" + date.getDate()).slice(-2);
  return normalized;
}
var data = [
        {
            "EAN": "180199",
            "Besteldatum": "2003-09-22",
            "BTW": "€19,00",
            "Totaalbedrag": "€109,00",
            "Status": "Verzonden",
            "Verzonden": "2003-09-22",
            "Factuur": "here"

        },
        {
            "EAN": "180200",
            "Besteldatum": "2004-11-12",
            "BTW": "€19,00",
            "Totaalbedrag": "€109,00",
            "Status": "Verzonden",
            "Verzonden": "2003-09-22",
            "Factuur": "here"
        },

     ];

Answer 1

通常在使用dataTable时，您可以为列提供类。生成dataTable后，用按钮替换列中的数据。

$('.className').each(function(index, item){
  $(item).html(yourButton html);
})

在这里，您可以找到有关向列添加类的文档：

https://datatables.net/reference/option/columns.className

Answer 2

使用按钮：

<button onclick="getData()">click me</button>

//功能

function getData(){
    //call that array here, then use
    console.log(data.Factuur);

   }

在javascript数据数组中的div

2 个答案: