Answers

• allan Posts: 65,251Questions: 1Answers: 10,814 Site admin

  7:55AM

  I'd ideally like to be able to re-use the DataTables implementation, is there a way to get at that?

  Unfortunately no, there isn't an option for that I'm afraid. I do see the utility in that, and possibly the ability to replace the default implementation, but at the moment you'd need to pull the logic out of DataTables and rework it.

  This is the function you want if you did want to head down that road.

  I will look at making it accessible in future.

  Allan
• trumpetinc Posts: 4Questions: 1Answers: 0

  2:49PM

  Thanks. I ultimately decided to go with my "other option" - initiating my own ajax query against only the changed rows, then doing an in-place update. The result is super responsive, and the search syntax is completely consistent with the back-end.

  Here's the implementation in case anyone else would benefit:

  class DataTableRefresher{
      constructor(table, config){
          this.table = table;
          this.getIdForData = this._createIdForDataFn(config.idPath);
          
          // For non-spring mode, use the standard DT exact search syntax ( "123" )
          // In spring DT mode, the +-1 is for Spring DataTables weirdness (123+-1)
          // The + is used for multi-select.
          // Then we have to add a non-existent additional search spec (-1).
          // If we don't do this, then the Spring DataTables implementation assumes that we are doing a LIKE search, so we find more records than we want.
          // Ultimately, Spring's DataTables filtering predicates need to be fixed.
          this.getSearchStringForId = config.springDataTablesMode ? (id) => id + '+-1' : '"' + id + '"';
          
      }
      
      _createIdForDataFn(path){ // spec can be dot separated, etc...
          // Split the path string into an array of individual keys
          const keys = path.split('.');
  
          return (data) => keys.reduce(
                                  (current, key) => current ? current[key] : undefined
                                  , data
                              );
  
      }
      
      _getRowForId(id){
          for (const r of this.table.rows()[0]){
              let dtRow = this.table.row(r);
              if (this.getIdForData(dtRow.data()) === id){
                  return dtRow;
              }
          }
          
          return undefined;
      }
      
      async refreshTableForIds(ids){
          for(const id of ids){
              let dtRow = this._getRowForId(id);
              if (dtRow){
  
                  // make a deep copy of the current search params            
                  let params = {...this.table.ajax.params()};
                  params.columns = [...this.table.ajax.params().columns];
  
                  // then add another search spec to get us our id
                  params.columns.push(
                      {
                          data: this.table.init().dataSource.idPath,
                          searchable: true,
                          search: {
                              value: this.getSearchStringForId(id) 
                          }
                      }
                  );
                  
                  let separator = this.table.ajax.url().includes('?') ? '&' : '?';
                  let url = this.table.ajax.url() + separator + $.param(params); // have to encode the ajax parameters are a proper query string for the URL
                  
                  let dtResult = await doRestCall('GET', url);
                  if(dtResult.data.length){
                      // changed data is still visible in the table (i.e. hasn't been deleted or changed in a way that filters it out)
                      let newData = dtResult.data[0];
  
                      dtRow.data(newData).invalidate();
                      
                      this.table.init().rowCallback?.(dtRow.node(), newData);
  
                  } else {
                      // the changed data is no longer visible in the table
                      dtRow.draw('page');
                  }           
                  
              } else {
                  console.log(`id ${id}  not in table, ignoring the refresh request`);
              }
          }   
      }   
  }
  

  example usage:

  const dtRefresher = new DataTableRefresher(this.api(), { idPath: 'id', springDataTablesMode: true} );
  

  This can then be used in an event handler (in my case, triggered by a websocket STOMP message that contains the list of ids that have changed).

  I'm going to hold off on debouncing the draw() call as this isn't impacting our application much right now, but it would be pretty easy to implement.
• trumpetinc Posts: 4Questions: 1Answers: 0

  3:41PM

  Just realized that there is one line in this code that uses an external function dependency:

  let dtResult = await doRestCall('GET', url);
  

  that will need to be adjusted for the specific ajax call approach.
• trumpetinc Posts: 4Questions: 1Answers: 0

  3:55PM

  Update that includes a default ajax handler (which can be overidden with the optional doAjaxCallFn config value):

  class DataTableRefresher{
      constructor(table, config){
          this.table = table;
          this.getIdForData = this._createIdForDataFn(config.idPath);
          
          // For non-spring mode, use the standard DT exact search syntax ( "123" )
          // In spring DT mode, the +-1 is for Spring DataTables weirdness (123+-1)
          // The + is used for multi-select.
          // Then we have to add a non-existent additional search spec (-1).
          // If we don't do this, then the Spring DataTables implementation assumes that we are doing a LIKE search, so we find more records than we want.
          // Ultimately, Spring's DataTables filtering predicates need to be fixed.
          this.getSearchStringForId = config.springDataTablesMode ? (id) => id + '+-1' : '"' + id + '"';
          
          this.doAjaxCall = config.doAjaxCallFn ? config.doAjaxCallFn : this._defaultDoAjaxCall;
          
      }
      
      async _defaultDoAjaxCall(url){
          const response = await fetch(url);
          if (!response.ok){
              if (response.status == 401){
                  throw new Error("Authorization is expired");
              }
              var body = await response.json();
              console.log(`[${response.status}] - ${body.message}`);
              throw new Error(`[${response.status}] - ${body.message}`);
          }
          const contentType = response.headers.get("content-type");
          if (!contentType || !contentType.includes("application/json")) {
            throw new TypeError("Oops, we haven't got JSON!");
          }
          
          return response.json();
      }
      
      _createIdForDataFn(path){ // spec can be dot separated, etc...
          // Split the path string into an array of individual keys
          const keys = path.split('.');
  
          return (data) => keys.reduce(
                                  (current, key) => current ? current[key] : undefined
                                  , data
                              );
  
      }
      
      _getRowForId(id){
          for (const r of this.table.rows()[0]){
              let dtRow = this.table.row(r);
              if (this.getIdForData(dtRow.data()) === id){
                  return dtRow;
              }
          }
          
          return undefined;
      }
      
      async refreshTableForIds(ids){
          for(const id of ids){
              let dtRow = this._getRowForId(id);
              if (dtRow){
  
                  // make a deep copy of the current search params            
                  let params = {...this.table.ajax.params()};
                  params.columns = [...this.table.ajax.params().columns];
  
                  // then add another search spec to get us our id
                  params.columns.push(
                      {
                          data: this.table.init().dataSource.idPath,
                          searchable: true,
                          search: {
                              value: this.getSearchStringForId(id) 
                          }
                      }
                  );
                  
                  let separator = this.table.ajax.url().includes('?') ? '&' : '?';
                  let url = this.table.ajax.url() + separator + $.param(params); // have to encode the ajax parameters are a proper query string for the URL
                  
                  let dtResult = await this.doAjaxCall(url);
                  if(dtResult.data.length){
                      // changed data is still visible in the table (i.e. hasn't been deleted or changed in a way that filters it out)
                      let newData = dtResult.data[0];
  
                      dtRow.data(newData).invalidate();
                      
                      this.table.init().rowCallback?.(dtRow.node(), newData);
  
                  } else {
                      // the changed data is no longer visible in the table
                      dtRow.draw('page');
                  }           
                  
              } else {
                  console.log(`id ${id}  not in table, ignoring the refresh request`);
              }
          }   
      }   
  }
  

  Basic usage:

  const dtRefresher = new DataTableRefresher(this.api(), { idPath: 'id'} );
  

  Complete configuration example:

  const dtRefresher = new DataTableRefresher(this.api(), { idPath: 'id', springDataTablesMode: true, doAjaxCallFn: (url) => doRestCall('GET', url)} );
  
• allan Posts: 65,251Questions: 1Answers: 10,814 Site admin

  7:59PM

  That's awesome. Thanks for sharing your solution with us!

  Allan