Multiple tables with the edit buttons not working if page is too long

dougm

The buttons lower on the page that I scroll to do not fire. I have 4 tables that are generated with the following code. If there are no records entered yet all 4 new buttons work. if there are enough rows to push the next table down so you have to scroll the button doesn't work and kind of acts like a href and causes the page to scroll up. Any ideas?

    buttons: [
        { extend: "create", text: '<i class="fa fa-plus fa-2x"></i>', titleAttr: 'New Entry', editor: theEditor, className: 'btn', 
            action: function(){
                newCapitalCostEntry(recordType);
            }
        },
        { extend: "edit", text: '<i class="fa fa-edit fa-2x"></i>', titleAttr: 'Edit Entry', editor: theEditor, 
            action: function(e, dt){
                let row = dt.row({selected: true}).data();
                editCapitalCostEntry(row.DT_RowId);
            }
        },
        { extend: "remove", text: '<i class="fa fa-trash fa-2x"></i>', titleAttr: 'Delete Entry', editor: theEditor, 
            action: function(e, dt){
                let row = dt.row({selected: true}).data();
                deleteCapitalCostEntry(row.DT_RowId);
            }
        }
    ],

allan

There is nothing immediately wrong there, but of course that is only part of the code, so I'm likely missing something. Can you link to a page showing the issue so I can help to debug it please?

Allan

dougm

I don't have a good way to share the actual problem as the application is only running on my machine and not built out to my test server. I will try to explain better what I am seeing.
I have a popup window with a lot of editor tables populated from my database. If the list of tables/data is long and needs to scroll and you scroll down to the add button for one of the tables and click it the page scrolls up a bit and doesn't fire. Oddly enough (or not) I threw a button above and below the existing "create" button to see if that had the same issue. It worked. Does that help?

<button onclick="window.location.href='www.google.com'">Google</button>

<table id="transportationAdminCostsEntries" class="display responsive nowrap" style="width:100%">
    <caption>TRANSPORTATION_ADMIN</caption>
   <thead>
       <tr>
            <th style="width:70%;">Description</th>
            <th style="width:30%;">Amount</th>
       </tr>
   </thead>
   <tfoot>
    <tr>
        <th></th>
        <th></th>
    </tr>
   </tfoot>
</table>

<button onclick="window.location.href='www.google.com'">Google</button>     

The button source generated from the editor looks like this.

<button class="dt-button buttons-create" tabindex="0"
aria-controls="transportationAdminCostsEntries"
type="button" title="New Entry">
<span><i class="fa fa-plus fa-2x"></i></span>
</button>

I added the same class etc to my google button and the button still works

<button class="dt-button buttons-create" tabindex="0"
aria-controls="transportationAdminCostsEntries"
type="button" onclick="window.location.href='www.google.com'">Google</button>

Hopefully this helps? Sorry for the verbosity.

Thanks

dougm

Addition - Removed the icon and replaced with text

extend: "create", text: '<i class="fa fa-plus fa-2x"></i>', titleAttr: 'New Entry', editor: theEditor,

TO

extend: "create", text: 'NEW!', titleAttr: 'New Entry', editor: theEditor,

Same problem

allan

It sounds like the event handler isn't being added to the button for some reason, but that's not something I've seen before, even with multiple tables on a page, so I'd really need a test case to be able to help resolve this. Perhaps you can create one on http://live.datatables.net if you can't host your own.

Allan

dougm

Hi Allan, sent you instructions on where to look at the issue.

Thanks
Doug