For savedStatesCreate How can I modify the Button Text

Hon3yNutz

I currently am using the savedStatesCreate extension to group the save and restore state functionality in one button -- but i have been unsuccessful at renaming the button. For the purposed of my team, we want to use save/load filter instead of save states ... is there any way to do this?

Also from a recommendation side of things, within this button, id recommend changing the css for div.dt-button-collection div.dt-btn-split-wrapper button.dt-button to include width: fit content and remove the pixel width on div.dt-button-collection (i set it to width: auto) This way the saved states expand to show the full name. Its not perfect but it works.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Hon3yNutz

Thanks Colin -- sorry given i had nothing to show i didnt know how to even provide a test... here is my code block atm below. My main issue is how i rename the Save States button that shows by default. Below you will see I am trying to rename it through

'text:{
                    0: 'Save/Open Custom Filter',
                    _: '(%d) Custom Filter Selected' 

Here is the full code set (sans ajax and all the columns):

var table = $('#datatable').DataTable( { 
        dom: 'Blrtip',
        data: AJAX_data,
        autoWidth: false,
        stateSave: true,
        stateDuration: 0,
        stateLoadParams: function (settings, data){
            data.search.search = ""; 
        },
        language: { 
            "zeroRecords": "No Data Found", //default no record text
            searchBuilder: {
                button: { 
                    0: '<i class="fas fa-search"></i> Build a Filter',
                    _: '(%d) Filter(s) Used' 
                }
            },
            stateRestore: {
                renameTitle: 'Rename'
            }
        },
        order: [ [1, 'asc'] ], // start to sort data by name 
        pageLength: 25,
        buttons:[
            {
                extend: 'searchBuilder',
                config: {
                    depthLimit: 1,          
                    clearall: null,
                    columns: [1,3,4,5,6,7,9,10,11,14,20,21,22],
                    conditions: {
                        array: {
                            contains:{ conditionName: "List Options"}
                        }
                    }
                }
            },
            {
                text: 'Reset',
                attr: { id: 'resetbutton'}  // adds id to resetbutton
            },
            {   
                extend: 'savedStatesCreate',
                config: {
                                       creationModal: true
                }
                 text:{
                    0: 'Save/Open Custom Filter',
                    _: '(%d) Custom Filter Selected'
                } 
            }
        ],
        columns: [  
            { "data": ... }
                ]
});

kthorngren

See if this savedStates Custom Button Text example helps. Its different than what you have.

Kevin

Hon3yNutz

Unfortunately not. The issue is that I am using savesStatesCreate -- if i add another button "savedStates" it just adds that button. I need to modify the text within the extension...this is where im getting lost. I have tried text, and within the language modifier tried to adjust stateRestore there (no dice on either)

kthorngren

I took the example I linked and used it with just savedStatesCreate.
http://live.datatables.net/tuhunihu/1/edit

Note the example states this:

It is also possible to include the number of states in the text for the savedStatesCreate button.

Kevin

Hon3yNutz

@kthorngren -- 100% that worked. However -- if you reference my code, you will see under language i say

language: {
        "zeroRecords": "No Data Found", //default no record text
        searchBuilder: {
            button: {
                        0: '<i class="fas fa-search"></i> Build a Filter',
                        _: '(%d) Filter(s) Used'
                    }
        },
        stateRestore: {
            renameTitle: 'Rename'
        }
    },

by changing it to:

language: { 
        zeroRecords: "No Data Found", //default no record text
        buttons: {
            searchBuilder: {
                0: '<i class="fas fa-search"></i> Build a Filter',
                _: '(%d) Filter(s) Used'
            },
            savedStates: {
                0: 'Save/Open Custom Filter',
                _: '(%d) Custom Filter Selected'
            }
        }
    },

Corrected the text under saved states -- but then broke searchBuilder As you can see i moved the nested buttons from searchbuilder and made it the top of the hierachy

Hon3yNutz

To be clear -- to correct the issue I used

        language: { 
            zeroRecords: "No Data Found", //default no record text
            searchBuilder: {
                button: {
                    0: '<i class="fas fa-search"></i> Build a Filter',
                    _: '(%d) Filter(s) Used'
                }
            },
            buttons: {
                savedStates: {
                    0: 'Save/Open Custom Filter',
                    _: '(%d) Custom Filter Selected'
                }
            }
        },

Which solves everything, but i guess the prior post im asking -- why the difference in how its written

colin

It's just the way the code is structured. The language options are per component, and when SearchBuilder is being used under a button, the Buttons are the extension. It's not ideal, agreed, but just how it is,

Colin

Hon3yNutz

Thanks and understood! One final final note...for future people looking for help -- the custom name _: (%d) Custom Filter Selected is not necessarily accurate -- that value will only tell you how many filters have been saved. I have since replaced the zero state with the null state (and deleted the old null state) since knowing there are 10 filters available was less useful to our users.

Hon3yNutz

One last question... While I can physically change the name of the button as listed above -- is there a way to change the name of the button to list the actual name of the state activated?

The goal here would be to have a null condition ( _: ) where when there is a state selected the button name would reflect the activated button -- or alternatively have something somewhere that gives the user more information about the active state

colin

You could use searchBuilder.filterChanged to do that. Your function there is triggered every time a search is added/removed/changed, and you can use that trigger to change the text of the button. The example on that reference page is doing just that,

Colin

Hon3yNutz

Ok so after a lot of playing around I figured it out -- I will say this seems like something that i have overengineered -- but it works by taking advantage of the following example: https://datatables.net/extensions/staterestore/examples/customisation/activeLabel.html

language: { 
            zeroRecords: "No Data Found", //default no record text
            searchBuilder: {
                button: {
                    0: '<i class="fas fa-search"></i> Build a Filter',
                    1: '(1) Filter Used',
                    _: '(%d) Filters Used'
                }
            },
            buttons: {
                savedStates: {
                    _: '<span class="activeStates"></span>'
                },
                createState: 'Save Current Filter',
            }
        }

table.on('draw stateRestore-change', function(){
        var active = table.stateRestore.activeStates();
        var activeString = 'Save/Load Filter';
        if (active.length > 0) {
            activeString = "Filter Loaded: " + active[0].name; 
        }/* else{activeString += "No Current Filters";} */
        $('span.activeStates').text(activeString)
    })
    table.draw();

colin

Nice, thanks for reporting back,

Colin