Disable new button once certain row count is reached

TMR

Hi All,

I've been working a lot with DataTables / Editor and they are fab - great work Allan!

I've been searching everywhere for this and cant find any help on it - surprised about that as I would imagine this is a common question.

All I need to do is disable the 'new' button once a user has input more than 10 rows, I cant see any way to do this anyone else out there have any input to this?

allan

Interesting - I've not come across that requirement before!

What I would suggest doing is listening for the create event and have a counter that is incremented by one each time that event is triggered. Then when that counter hits 10 use the buttons().disable() method to disable the New button.

Allan

TMR

I was thinking we'd somehow look for the RowCount and once it reached more than ten disable the button. The counter is a good idea but if a user deletes a row then uploads one then deletes another couple (taking the row count under 10) the counter would still total over 10(?).

Maybe this explains it a bit better:
if ' + rowCount +' >10 then
ShowDisabledButton
else
ShowEnabledButton
End if

allan

So basically the number of rows that are in the table? In that case use draw and page.info().

Allan

TMR

Hi Allan,
that may be a way, I've sent you a message through this forum.

Tom

allan

To bring this thread to a conclusion for anyone else reading it, the way we resolved this was to add another button to the buttons.buttons array:

            {
                text: 'Upgrade required',
                className: "btn btn-success",
                init: function () {
                    $(this.node()).css( 'display', 'none' );
                },
                action: function () {
                    window.location.href = '/upgrade';
                }
            },

And then use the draw event to determine which of the two buttons should be shown:

    table.on( 'draw', function () {
        var maxedOut = table.page.info().recordsTotal >= 10;

        $( table.button( 0 ).node() ).css( 'display', maxedOut ? 'inline-block' : 'none' );
        $( table.button( 1 ).node() ).css( 'display', maxedOut ? 'none' : 'inline-block' );
    } );

Regards,
Allan