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

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

dougmdougm Posts: 23Questions: 3Answers: 0

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

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • dougmdougm Posts: 23Questions: 3Answers: 0

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

    Thanks
    Doug

This discussion has been closed.