How to add Custom buttons (Add/Delete/..) to a Datatable above the table?

foxbond

I have a Basic table that i want to change into a Datatable. The Basic table has some custom buttons (like Delete/ADD/...) above the table (same row as PDF/EXCEL/...) example:

I want to change the basic table into a Datatable, but i have an issue on how to have custom buttons active and in the same place as in the basic table.

analysing the basic table, i have trouble adding this line to the Datatable:

oTable.setActionDelete({'url' : "<?php echo url_for('DeleteDAA') ?>"});

it is the line responsible for the Delete Button

Basic Table code:

                                       var oTable = new jqueryTable();
                                                oTable.addOption({
                                                    "sDom": 'T<"clear">frti',
                                                    "bScrollCollapse": true,
                                                    "bPaginate": true,
                                                    iDisplayLength: -1
                                                    });
                                                oTable.create($('#liste-DAA')); 
                                                <?php if($actif=='1' && $sf_user->hasCredential('modifier_DAA')):?>
                                                oTable.setActionDelete({'url' : "<?php echo url_for('DeleteDAA') ?>"});
                                                oTable.isEditable();
                                                <?php endif?>

                                                oTable.generate();

-DeleteDAA Code:

public function executeDeleteDAA($request) {
$id= $_GET['id'] ;

/* connection à la base Doctrine --------------------------------------*/
$connection = Doctrine_Manager::getInstance()->getConnection('doctrine');
$dbh = $connection->getDbh();


//Récupérer le statut de la demande
$DAA_statut = $dbh->query("select d.statut
                              from Demande_Achat d
                              WHERE d.id='$id'")->fetch();



if($DAA_statut[0]=='Encours'){

    $updated=$dbh->query("update Demande_Achat set actif='0' where id='$id'");
    if($updated) return $this->renderText($id);
    else return $this->renderText("");

}
else {
    $msg="Vous ne pouvez plus modifier cette demande d'achat !";
    return $this->renderText(html_entity_decode($msg));
}
}

colin

Hi @foxbond ,

The best bet is to look at the Buttons extension - there's several examples of custom buttons that should get you going.

Cheers,

Colin

foxbond

My frustrating issue is on how to implement this part in a Datatable button

oTable.setActionDelete({'url' : "<?php echo url_for('DeleteDAA') ?>"});

it's the part responsible of the button action in the Basic table

allan

This document shows how to create a custom button - and more specifically have a custom action when the button is activated (i.e. inside the action function). There is where you would set that function.

Is setActionDelete a method you are adding yourself? I'm not familiar with that one.

Allan

foxbond

Thank you for your answer
I just did what you said:

    $.fn.dataTable.ext.buttons.setActionDelete = {
                        className: 'buttons-delete',

                        action: function ( e, dt, node, config ) {
                            setActionDelete({'url' : "<?php echo url_for('DeleteDAA') ?>"});
                        }
                    };


                $('#liste-DAA').dataTable({
                  scrollX: true,
                  dom: 'lBfrtip',
                  language: {
                                search: '<span>Filter:</span> _INPUT_',
                                lengthMenu: '<span>Show:</span> _MENU_',
                                paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
                            },
                  select: true,
                  buttons: {            
                        dom: {
                            button: {
                                className: 'btn btn-default'
                            }
                        },
                        buttons: [
                                {extend: 'setActionDelete', text: 'Supprimer'},
                                {extend: 'colvis'},
                                {extend: 'copy'},
                                'excel',
                                {
                                extend: 'pdf',
                                orientation: 'landscape',
                                exportOptions: {
                                columns: 'thead th:not(.noExport)'
                                }
                                },
                                {
                                extend: 'print',
                                exportOptions: {
                                columns: 'thead th:not(.noExport)'
                                }
                                }
                                ]}
                            });

                    $('#liste-DAA').on( 'click', 'tr', function () {
                        $(this).toggleClass('selected');
                    } );

Now the button shows up, but it's not working nothing happens when i select a row and click the button

screenshot: https://i.imgur.com/qJArBdB.png

allan

Have you put a breakpoint or a console.log message in your action function to make sure it is being called? Unfortunately I can't debug it from the image, I would need a link to your page.

Allan