Add Action Buttons per Row Server Side

elimariaaa

Hello,

I'd like to add action buttons on my datatables per row. I have the following script:

<script type="text/javascript">
// Setup - add a text input to each footer cell
jQuery(document).ready(function($) {
    var add_action = <?php echo $retrieve_is_action;?>;
    var add_checkbox = <?php echo $retrieve_is_checkbox;?>;
    if(add_action == 1){
        var add_to_columndefs = '{"targets": [ -1 ],"data": "wiwit"}';
    }
    $('#cq-datatables-<?php echo $datatable_id; ?> tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    var table = $('#cq-datatables-<?php echo $datatable_id; ?>').DataTable( 
    {
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "pagingType": "full_numbers",
        "ajax": {
            "url": "<?php echo plugins_url(); ?>/cq-datatables/datatables/scripts/post.php",
            "type": "POST",
            "data": function(dtParms){ 
                        dtParms.table_name = "<?php echo $retrieve_table_name; ?>";
                        dtParms.column_names = '<?php echo $column_names; ?>';
                        dtParms.is_action = add_action;
                        dtParms.is_checkbox = add_checkbox;
                        return dtParms;
                    }
        },
        initComplete: function() {
          var api = this.api();

          // Apply the search
          api.columns().every(function() {
            var that = this;

            $('input', this.footer()).on('keyup change', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
        },
        "columns": [<?php echo $test; ?>,
                    {
                    "render": function (data, type, row) {
                    return '<a class="btn btn-danger" data-id="' + row[1] + '">' +
                        '<span class="glyphicon glyphicon-trash"> </span>' +
                        '</a>'
                    +
                        '<a class="btn btn-primary" data-id="' + row[1] + '">' +
                        '<span class="glyphicon glyphicon-pencil"> </span>' +
                        '</a>'
                }}],
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false
            }
        ],
        "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip',
        "buttons": [
            'excelHtml5',
            'csvHtml5',
            {
                extend: 'pdfHtml5',
                download: 'open'
            },
            'print',
            'colvis'
        ]
    } 
    );
} );
</script>

However, I get an error: Uncaught TypeError: Cannot read property 'nodeName' of null

And it points me here(line 8480):

// Cell in the table body
        if ( s.nodeName && s._DT_CellIndex ) {
            return [ s._DT_CellIndex.column ];
        }

What am I missing? Thanks!

Eli

elimariaaa

UPDATE:

I was able to make it work using columnDefs but I am unable to add a custom column. Any ideas?

Here's my current code:

<script type="text/javascript">
// Setup - add a text input to each footer cell
jQuery(document).ready(function($) {
    var add_action = <?php echo $retrieve_is_action;?>;
    var add_checkbox = <?php echo $retrieve_is_checkbox;?>;
    var action_count = <?php echo $arraySize+1; ?>;
    $('#cq-datatables-<?php echo $datatable_id; ?> tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    var table = $('#cq-datatables-<?php echo $datatable_id; ?>').DataTable( 
    {
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "pagingType": "full_numbers",
        "ajax": {
            "url": "<?php echo plugins_url(); ?>/cq-datatables/datatables/scripts/post.php",
            "type": "POST",
            "data": function(dtParms){ 
                        dtParms.table_name = "<?php echo $retrieve_table_name; ?>";
                        dtParms.column_names = '<?php echo $column_names; ?>';
                        dtParms.is_action = add_action;
                        dtParms.is_checkbox = add_checkbox;
                        return dtParms;
                    }
        },
        initComplete: function() {
          var api = this.api();

          // Apply the search
          api.columns().every(function() {
            var that = this;

            $('input', this.footer()).on('keyup change', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
        },
        "columns": [<?php echo $test; ?>],
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false
            },
            {
                "targets": [ -1 ],
                "data":"id", "render": function(data,type,full,meta)
                { return '<a href=view.html?id='+data+'>Edit</a> <a href=view.html?id='+data+'>Delete</a>';
                }
            }
        ],
        "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip',
        "buttons": [
            'excelHtml5',
            'csvHtml5',
            {
                extend: 'pdfHtml5',
                download: 'open'
            },
            'print',
            'colvis'
        ]
    } 
    );
} );
</script>
    <table id="cq-datatables-<?php echo $datatable_id; ?>" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <?php
                    $table_counter = 0;
                    foreach ($cq_existing_columns as $table_columns) {
                        echo "<th>".ucwords(str_replace('_', ' ', $table_columns))."</th>";
                    }
                    if($retrieve_is_action == 1){
                ?>
                <th>Action</th>
                <?php       
                    }
                ?>
            </tr>
        </thead>
        <tfoot>
                <tr>
                    <?php
                        $table_counter = 0;
                        foreach ($cq_existing_columns as $table_columns) {
                            echo "<th>".ucwords(str_replace('_', ' ', $table_columns))."</th>";
                        }
                        // if($retrieve_is_action == 1){
                    ?>
                    <!-- <th>Action</th>-->
                    <?php       
                        // }
                    ?> 
                </tr>
            </tfoot>
    </table>

I know that setting the "targets" to [-1] will show it on the last row but if make it to [8] where my 'Action' column should be, I'm back to this error: "Uncaught TypeError: Cannot read property 'nodeName' of null".

Any ideas what I'm missing?

elimariaaa

So, I did a little experiment.

If I add this code:

$('#cq-datatables-<?php echo $datatable_id; ?>').empty();

The table headers are gone but the data are right in line. Also, I read that it's an error that happens because you are trying to get the parentNode of something that doesn't exist

I'm really lost now and it's bugging me for days.