Enable REMOVE button when 1 or more rows selected but disable the EDIT button when multiple

Enable REMOVE button when 1 or more rows selected but disable the EDIT button when multiple

mlongmlong Posts: 10Questions: 5Answers: 0

I have three buttons:

buttons : [
     {extend: 'create', editor: editor },
     {extend: 'edit', editor: editor },
     {extend: 'delete', editor: editor },
]

And I'm using

select: {
      style:    'os',
      selector: 'td:first-child'
},

I tried 'single' but then I can only select on row at a time. I'd like to be able to select multiple rows for deleting.

I need to enabled the edit button when exactly 1 (and only 1) row is selected.
AND I need to enable Remove button when 1 or more rows selected.

Can this be done? If so how? (An example would be nice)

This question has an accepted answers - jump to answer

Answers

  • crush123crush123 Posts: 417Questions: 126Answers: 18
    edited June 2016 Answer ✓

    You could try the selectedSingle button.

    https://datatables.net/reference/button/selectedSingle

    it is enabled when only one row is selected

  • mlongmlong Posts: 10Questions: 5Answers: 0

    Never mind I found a solution: Just had to define the button using selectedSingle (only enabled when a single row is selected) and then tell editor to pop up, with some options, when the button is clicked.

       {    extend: 'selectedSingle',
        editor: editor,
        text: "Edit",
            action: function ( e, dt, node, config ) {
                preview.editor
                    .title( 'Edit Lot' )
                    .buttons( 'Update' )
                    .message('Editing the data this way can produce unpredictable results.')
                    .edit(preview.dataTable.row( { selected: true } ));
            },
       },
       {
            extend: 'remove',
            editor: editor,
            formMessage: function ( e, dt ) {
                var rows = dt.rows( e.modifier() ).data().pluck('title');
                return 'Are you sure you want to delete the following? <ul><li>'+rows.join('</li><li>')+'</li></ul>';
            }
       },
    
This discussion has been closed.