Action buttons in datatable are not working in mobile mode

salmanelahi93

In the above screenshot, the buttons in the last column are working fine on desktop mode.

In this screenshot, the edit and delete buttons are not working in mobile mode.

Please let me know the solution if anyone faced this issue.

Thanks

kthorngren

Likely you will need to use responsive.details.renderer to render the Responsive child display. This will allow you to use data-dt-row and data-dt-column to allow the APIs to find the parent row. See the last example in the responsive.details.renderer docs.

Kevin

allan

Just to add a little bit to Kevin's note - I think what is happening is that you are placing event handlers on the action buttons that are selecting the buttons when in the table row. However, when they are placed into the responsive view, the selectors aren't looking for the buttons there.

Without code (or an example as requested in the forum rules) we can't say for certain, but most likely you need to extend your event listener to handle the buttons in the responsive view as well.

Allan

salmanelahi93

$("#datatable-grid").DataTable({
        "responsive": true,
        "lengthChange": true,
        "autoWidth": true,
        "buttons": [
          {
            extend: 'excel',
            title: pageTitle,
            exportOptions: {
              columns: arrColsExport,
              stripHtml: true,
            }
          },
          {
            extend: 'print',
            title: pageTitle,
            exportOptions: {
              columns: arrColsExport,
              stripHtml: true,
            }
            //customize: function (win) {
            //  $(win.document.body).find('thead').css('background-color', 'grey');
            //}
          }],
        "paging": true,
        "searching": isSearchingAllow,
        "ordering": true,
        "info": true,
        columnDefs: [
          //{ targets: "action", orderable: false },
          {
            target: 5,
            visible: true,
            searchable: false
          }
        ]
      }).buttons().container().appendTo('#datatable-grid_wrapper .col-md-6:eq(0)');
    });

I implemented the above code for rendering the datatable @allan.

I also add the following value in responsive property but not succeeded @kthorngren.

"responsive": {
          details: {
            renderer: $.fn.dataTable.Responsive.renderer.tableAll()
          }
        },

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Thank you. However, I don't see anything there about the event handlers for your action buttons?

Allan

salmanelahi93

@allan I just used angular code for the action button i.e. angular's onclick attribute, and call angular's method for functionality.

allan

I suspect that because Responsive moves the elements in the document, and creates new elements for the responsive details view, that is the issue.

Try using this for your Responsive options in the DataTable configuration:

    responsive: {
        details: {
            renderer: DataTable.Responsive.renderer.listHiddenNodes()
        }
    }

That is an "experimental" (not very - it is widely used and should be solid) renderer that uses the original nodes and should allow your action buttons to work in this case.

Allan

salmanelahi93

@allan Action buttons are working fine after implementing your suggested change, but then everything is duplicating as circled in the screenshot.

allan

Can you link to a test case showing the issue so I can look into it please?

I suspect it will be something to do with Angular. If you can tell Angular not to update the content of the table, do so.

Allan