How to conditionally add a button to a row

Murray

I create the grid as follows with the data coming from a sql query

  $subsdataset = "[";  
    foreach ( $rows as $row )   {
        extract($row);
        $subsdataset .= "[";
        $subsdataset .= '"'.$row->payment_id.'",';
        $subsdataset .= '"'.$row->year.'",';
        $subsdataset .= '"'.$row->description.'",';
        $subsdataset .= '"'.$row->ddate.'",'; 
        $subsdataset .= '"'.$row->debit.'",'; 
        $subsdataset .= '"'.$row->subs.'",'; 
        $subsdataset .= '"'.$row->payment_type.'"';     
        $subsdataset .= "],";
  }
  $subsdataset = rtrim($subsdataset, ',');
  $subsdataset .= "]";

      var substable = jQuery('#subs').DataTable( {
          data: <?php echo $subsdataset; ?>,
          responsive: true,
          autoWidth: true,
          searching: true,
        columns: [
            { title: "Id." },
            { title: "Year" },
            { title: "Detail" },
            { title: "Date" },
            { title: "Subs due" },
            { title: "Paid" },
            { title: "Payment Type" },
            { title: "defaultContent": "<button  class=\"edit\">Edit</button>" } 
        ],
        "columnDefs": [
            {"className": "dt-left", "targets": "_all"},
          {
            targets: [0],
            visible: false,
            searchable: false
          }
        ],        
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
        nRow.setAttribute('id', aData[0]);
        },        
        dom: 'id',
        dom: "Bflrtip",   
        order: [ 1, 'desc' ],
        buttons: [
            {
                text: 'Add a Payment',
                action: function ( e, dt, node, config ) {
                    window.open(' https://bsapuk.org/add-a-transaction', '_self');
                }
            }
        ]     
     });   

I want the Edit button to only appear on the row when the content of Detail ($row->description) != "Annual".

I have seen the following code

        columnDefs: [{
        // puts a button in the last column
        targets: [-1], render: function (a, b, data, d) {
            if (data.descripton != "Annual") {
                return "<button  class=\"edit\">Edit</button>";
            }
            return "";
        }

How do I address data.description/data[description] to get this to work?

Regards
Murray

Murray

Correction to defaultContent line which does not affect the question.

            { title: "", "defaultContent": "<button  class=\"edit\">Edit</button>" }

kthorngren

How do I address data.description/data[description] to get this to work?

You need to object structured data and define the columns using columns.data. See the Data Source Types doc for details.

Currently the row data is array based so you would access the data using array notation, for example data[2]. However using objects is typically easier. My suggestion is to change your for loop to create an array of objects and use columns.data to define the column order.

Kevin