Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

DataTables stripeClasses Option

  • Last Updated : 11 Sep, 2021

DataTables is jQuery plugin that can be used for adding interactive and advanced controls to HTML tables for the webpage. This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed.

The stripeClasses option is used to specify an array that denotes the classes that would be used for the stripes in the table. The array may be of any length and DataTables would apply the classes sequentially as given in the array. This can be used in conjunction to declaring our own classes in CSS so that those particular styles are applied to the rows of the table.

Syntax:

stripeClasses( array )

Parameters: This option has a single parameter as mentioned above and described below:

  • array: This is the array that will be used to specify the name of the classes that will be applied to the rows of the table.

The examples below illustrate the use of this option.



Example 1: In this example, we use a single class in the array to specify a single colour to the rows.

HTML




<!DOCTYPE html>
<html>
    
<head>
  <!-- jQuery -->
  <script type="text/javascript" 
          src="https://code.jquery.com/jquery-3.5.1.js">
  </script>
  
  <!-- DataTables CSS -->
  <link rel="stylesheet"
        href=
  
  <!-- DataTables JS -->
  <script src=
  </script>
  
  <style>
      
    /* Define the classes to be used in the table */    
    .stripe-color {
      background-color: yellow !important;
    }
  </style>
</head>
    
<body>
  <h1 style="color: green;">
    GeeksForGeeks
  </h1>
  <h3>DataTables stripeClasses Option</h3>
  
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap">
    <thead>
      <tr>
        <th>Day</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>Patricia</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Caleb</td>
        <td>47</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Abigail</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rahim</td>
        <td>44</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sheila</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lance</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Erin</td>
        <td>48</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Christopher</td>
        <td>28</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Roary</td>
        <td>35</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Astra</td>
        <td>37</td>
      </tr>
    </tbody>
  </table>
    
  <script>
  
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
  
        // Specify a single class in the array
        stripeClasses: ['stripe-color']
      });
    }); 
  </script>
</body>
    
</html>

Output:

Example 2: In this example, we use three classes in the array to specify the use of multiple colors sequentially to the rows.

HTML




<!DOCTYPE html>
<html>
    
<head>
  <!-- jQuery -->
  <script type="text/javascript" 
          src="https://code.jquery.com/jquery-3.5.1.js">
  </script>
  
  <!-- DataTables CSS -->
  <link rel="stylesheet"
        href=
  
  <!-- DataTables JS -->
  <script src=
  </script>
  
  <style>
      
    /* Define the classes to be used in the table */
    .stripe-1 {
      background-color: yellow !important;
    }
  
    .stripe-2 {
      background-color: sandybrown !important;
    }
  
    .stripe-3 {
      background-color: skyblue !important;
    }
  </style>
</head>
    
<body>
  <h1 style="color: green;">
    GeeksForGeeks
  </h1>
  <h3>DataTables stripeClasses Option</h3>
  
  <!-- HTML table with random data -->
  <table id="tableID" class="display nowrap">
    <thead>
      <tr>
        <th>Day</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>2</td>
        <td>Patricia</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Caleb</td>
        <td>47</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Abigail</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Rahim</td>
        <td>44</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Sheila</td>
        <td>22</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Lance</td>
        <td>48</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Erin</td>
        <td>48</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Christopher</td>
        <td>28</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Roary</td>
        <td>35</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Astra</td>
        <td>37</td>
      </tr>
    </tbody>
  </table>
    
  <script>
  
    // Initialize the DataTable
    $(document).ready(function () {
      $('#tableID').DataTable({
  
        // Specify multiple classes to be used
        stripeClasses: ['stripe-1',
                        'stripe-2',
                        'stripe-3']
      });
    }); 
  </script>
</body>
    
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!