Answers.Body: <p>You can alter any DataTable table through it's API as long as you are in Civi's jQuery context (CRM.$)</p>
  
  <p>You could use hook_civicrm_alterTemplateFile or hook_civicrm_buildForm for example to load your script:</p>
  
  <pre><code>Civi::resources()-&gt;addScriptFile( 'my-extension', 'js/alterDataTables.js' );
  </code></pre>
  
  <p>Then in your js:</p>
  
  <pre><code>// alterDataTables.js file
  CRM.$( function( $ ) {
    // get and itarate over all dataTables
    $( '.dataTable' ).map( function( index, table ) {
      // get dataTable instance
      $( table ).DataTable()
        // set page length
        .page.len( 2 )
        // draw table
        .draw()
    } );
  } );
  </code></pre>
  
  <p>The above example was given to me so may have worked in some places e.g. when the dataTable is available on page load. For my use-case I needed to work with the 'Relationships' tab tables when viewing a Contact. In this case, $('.dataTable') would select nothing unless I responded to the ajax event, in which case I also needed to add once() to avoid an infinite loop of redrawing tables:</p>
  
  <pre><code>CRM.$(function($) {
    $(document).ajaxComplete(function() {
      var dt = $('.dataTable');
      if (dt.length) {
        $('.dataTable').once().map(function(index, table) {
          // get dataTable instance
          $(table).once().DataTable()
            // set page length
            .page.len(50)
            // draw table
            .draw()
        });
      }
    }); 
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-26T15:46:04.557Z
Answers.LastActivityDate: 2018-11-26T15:46:04.557Z
Answers.UserDisplayName: Eli Lisseck
Body: <p>Example use case:</p>
  
  <p>When viewing a Contact, on the Relationships tab we'd like the DataTables to default to showing 50 records.</p>
  
Tags: <datatables>
Title: How can I alter DataTable defaults / attributes without overriding core files?
ThreadText: # How can I alter DataTable defaults / attributes without overriding core files?
  
  (Asked by: username_0 on 2018-11-26)
  
  Example use case:
  
  When viewing a Contact, on the Relationships tab we'd like the DataTables to default to showing 50 records.
  
  **Tags:** datatables
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2018-11-26. Score: 2 | Accepted answer
  
  You can alter any DataTable table through it's API as long as you are in Civi's jQuery context (CRM.$)
  
  You could use hook\_civicrm\_alterTemplateFile or hook\_civicrm\_buildForm for example to load your script:
  
  ```
  Civi::resources()->addScriptFile( 'my-extension', 'js/alterDataTables.js' );
  
  ```
  
  Then in your js:
  
  ```
  // alterDataTables.js file
  CRM.$( function( $ ) {
    // get and itarate over all dataTables
    $( '.dataTable' ).map( function( index, table ) {
      // get dataTable instance
      $( table ).DataTable()
        // set page length
        .page.len( 2 )
        // draw table
        .draw()
    } );
  } );
  
  ```
  
  The above example was given to me so may have worked in some places e.g. when the dataTable is available on page load. For my use-case I needed to work with the 'Relationships' tab tables when viewing a Contact. In this case, $('.dataTable') would select nothing unless I responded to the ajax event, in which case I also needed to add once() to avoid an infinite loop of redrawing tables:
  
  ```
  CRM.$(function($) {
    $(document).ajaxComplete(function() {
      var dt = $('.dataTable');
      if (dt.length) {
        $('.dataTable').once().map(function(index, table) {
          // get dataTable instance
          $(table).once().DataTable()
            // set page length
            .page.len(50)
            // draw table
            .draw()
        });
      }
    }); 
  });
  
  ```
  
  
  ---
  
  