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

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

foxbondfoxbond Posts: 3Questions: 1Answers: 0

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));
}
}

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,598

    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

  • foxbondfoxbond Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 63,139Questions: 1Answers: 10,400 Site admin

    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

  • foxbondfoxbond Posts: 3Questions: 1Answers: 0

    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

  • allanallan Posts: 63,139Questions: 1Answers: 10,400 Site admin

    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

This discussion has been closed.