Disable Buttons When No Rows Selected

Restful Web Services

Is there an easy method to disable the save/export buttons when no rows are selected. My code is as follows:

        "tableTools": {
            "sRowSelect": "os",
            "sSwfPath" : "/uploads/js/datatables/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "select_all", "select_none", "print",
                {
                    "sExtends": "download",
                    "sButtonText": "Download",
                    "sUrl": "/uploads/js/datatables/php/generate_csv.php?user_id={/literal}{$user_id}{literal}&checkcode={/literal}{$checkcode}{literal}"
                }, 
                {
                    sExtends: "collection",
                    sButtonText: "Save",
                    sButtonClass: "save-collection",
                    "aButtons": [
                    {
                    "sExtends": "copy",
                    "sButtonText": "Copy - 'Number' column only",
                    "mColumns": [1]
                    },
                    {
                    "sExtends": "copy",
                    "sButtonText": "Copy - 'All' columns",
                    "mColumns": [1, 2, 3, 4]
                    },                    
                    {
                    "sExtends": "csv",
                    "sButtonText": "CSV - Save 'Number' column only",
                    "mColumns": [1],
                    "sFieldBoundary": ''
                    },
                    {
                    "sExtends": "csv",
                    "sButtonText": "CSV - Save 'All' columns",
                    "mColumns": [1, 2, 3, 4]
                    },                    
                    {
                    "sExtends": "xls",
                    "sButtonText": "Excel - Save 'Number' column only",
                    "mColumns": [1]
                    },
                    {
                    "sExtends": "xls",
                    "sButtonText": "Excel - Save 'All' columns",
                    "mColumns": [1, 2, 3, 4]
                    },
                    {
                    "sExtends": "pdf",
                    "sButtonText": "PDF - Save 'Number' column only",
                    "mColumns": [1]
                    },
                    {
                    "sExtends": "pdf",
                    "sButtonText": "PDF - Save 'All' columns",
                    "mColumns": [1, 2, 3, 4]
                    },                    
                    ]
                },
                { 
                "sExtends": "editor_remove",        
                "editor": editor 
                }
            ]
        }

I would like all the save/export buttons to be disabled when no rows are currently selected. Is this possible?

Thanks

Chris

allan

Is there an easy method to disable the save/export buttons when no rows are selected.

Currently no - sorry. You could modify the code so that they check to see if there are any rows first, or perhaps override the default click handler with your own (fnClick) but there isn't a built in way to enable and disable buttons yet. Coming in the next major update...

Allan

Restful Web Services

Is there any way to copy, for example, what is happening with the 'Delete' button because this behaves exactly how I would like the 'Save' button to behave. I.e. you cannot click it until at least one row has been selected.

allan

Yes, but as I noted, you would need to modify the code, or build your own button. The Delete button is based on the select_single button in TableTools. It has functions that are run when rows are selected and will add/remove classes as required.

Note also that in TableTools the fnClick handler will always run regardless of if the button is enabled or not. You would need to add a check to see if it is (the idea being that your check could show a message saying "Select some rows to use this function").

Allan

Restful Web Services

I have achieved what I was trying to do using a combination of adding and removing classes using:

$(document).ready(function() {
    var table = $('#cms_module_tps_userlisting').DataTable();
        $('#cms_module_tps_userlisting tbody').on('click', 'tr', function() {
            if ($(this).hasClass('selected')) {
                $('.save-collection, .copy-collection').removeClass("DTTT_disabled");
            } else {
                table.$('tr.selected').removeClass('selected');
                $('.save-collection, .copy-collection').addClass("DTTT_disabled");
            }
    });
}); 
</script>

Disabling on load using:

sButtonClass: "copy-collection DTTT_disabled",

And also disabling the clickable funtion of 'DTTT_disabled' buttons using the following CSS:

pointer-events: none;

I know the CSS is only supported by modern browsers but it will do as a rough solution for now.

Thanks