Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2022

  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 Posts: 13Questions: 3Answers: 0

  February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022

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

  Kevin
• Hon3yNutz Posts: 13Questions: 3Answers: 0

  February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022 Answer ✓

  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 Posts: 13Questions: 3Answers: 0

  February 2022

  @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 Posts: 13Questions: 3Answers: 0

  February 2022

  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 Posts: 15,240Questions: 1Answers: 2,599

  February 2022

  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 Posts: 13Questions: 3Answers: 0

  February 2022

  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 Posts: 13Questions: 3Answers: 0

  February 2022

  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 Posts: 15,240Questions: 1Answers: 2,599

  February 2022

  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 Posts: 13Questions: 3Answers: 0

  February 2022

  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 Posts: 15,240Questions: 1Answers: 2,599

  February 2022

  Nice, thanks for reporting back,

  Colin