### Basic Deferred Rendering Example

Source: https://datatables.net/extensions/select/examples/initialisation/deferRender.html

This example demonstrates the basic setup for deferred rendering in DataTables.net. It initializes the table with deferred rendering enabled, allowing the table to be processed in the background.

```javascript
var table = $('#example').DataTable( {
    "deferRender": true
} );
```

--------------------------------

### Basic Table Initialization with Fill Plug-in

Source: https://datatables.net/extensions/autofill/examples/initialisation/plugins.html

Demonstrates initializing a DataTables table with basic fill plug-ins. This example shows how to set up a table with columns for Name, Position, Office, Age, Start date, and Salary.

```html
<table id="example" class="display nowrap">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior JavaScript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012-12-02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012-08-06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010-10-14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>JavaScript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009-09-15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2012-12-01</td>
            <td>$103,600</td>
        </tr>
    </tbody>
</table>
```

--------------------------------

### Table Initialization Event

Source: https://datatables.net/extensions/keytable/examples/initialisation/events.html

This example demonstrates binding to the 'init' event, which is triggered after the table has been fully initialized. This is a good place to perform setup tasks that depend on the table being ready.

```javascript
$.fn.dataTable.moment('YYYY-MM-DD');

$('#example').on('init', function () {
    console.log('DataTables has been initialized!');
});

$('#example').DataTable({
    // ... other DataTables options
});
```

--------------------------------

### KeyTable Initialization with Event Binding

Source: https://datatables.net/extensions/keytable/examples/initialisation/events.html

This example demonstrates how to initialize KeyTable on a DataTables instance and bind to its events. It shows the basic setup required to enable keyboard navigation and event handling.

```javascript
$(document).ready(function() {
    $('#example').DataTable();

    var table = $('#example').DataTable();

    new $.fn.dataTable.KeyTable( table );

    table.on( 'key-focus', function ( e, datatable, cell, originalCell ) {
        var row = table.row( cell.index().row );

        // Example: Log the data of the focused row
        console.log( 'Row data: '+ row.data() );
    } );
} );
```

--------------------------------

### Custom Rendering Function for Start Date

Source: https://datatables.net/extensions/searchpanes/examples/advanced/renderSearch.html

This example shows a custom rendering function for the 'start_date' column. It formats the date into a more readable 'Month Day, Year' format. This is useful for presenting dates in a user-friendly way.

```javascript
function startDate( d ) {
    var date = new Date( d.start_date );
    var month = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];

    return month[ date.getUTCMonth() ] + ' ' + date.getUTCDate() + ', ' + date.getUTCFullYear();
}
```

--------------------------------

### Basic Table Initialization with startAndEndRender

Source: https://datatables.net/extensions/rowgroup/examples/initialisation/startAndEndRender.html

This example shows a basic DataTables initialization using jQuery. It includes the HTML table structure and the JavaScript code to initialize DataTables with custom start and end render functions for a specific column.

```html
<table id="example" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior JavaScript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012-12-02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012-08-06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010-10-14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>JavaScript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009-09-15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008-12-13</td>
            <td>$103,600</td>
        </tr>
    </tbody>
</table>
```

```javascript
$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value="">All</option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        column
                            .search( $(this).val() )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( $('<option></option>').text(d) );
                } );
            } );
        }
    } );
} );
```

--------------------------------

### Basic Row Selection Example

Source: https://datatables.net/extensions/fixedcolumns/examples/integration/select.html

This example shows how to initialize a DataTable and enable row selection. Clicking a row will highlight it.

```javascript
new DataTable('#example', {
    orderCellsTop: true,
    fixedHeader: true
});
```

--------------------------------

### HTML Table Structure for Reset Ordering Example

Source: https://datatables.net/extensions/colreorder/examples/initialisation/reset.html

The raw HTML for the table used in the reset ordering example. This includes the table element with the ID 'example' and a button with the ID 'reset' to trigger the reset functionality.

```html
<button id="reset">Reset to original HTML order</button>
<br/>
<br/>
<table id="example" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        <tr>
```

--------------------------------

### Get/Set Fixed Columns at Start

Source: https://datatables.net/extensions/fixedcolumns/api

Use the `fixedColumns().start()` method to get or set the number of columns fixed at the start of a DataTables table.

```javascript
$( selector ).DataTable().fixedColumns().start();
```

--------------------------------

### Get DateTime Value

Source: https://datatables.net/extensions/datetime/api/val%28%29

Retrieve the current date value from a DateTime instance. This example shows how to get the value within a change event listener.

```javascript
let el = document.getElementById('example');
let dt = new DateTime(el);

el.addEventListener('change', function () {
    console.log('Selected value is: ', dt.val());
});  
```

--------------------------------

### Basic Table Initialization with Pre-Selected Rows

Source: https://datatables.net/extensions/searchpanes/examples/initialisation/preSelect.html

This example shows a standard HTML table that will be initialized with DataTables and SearchPanes. The pre-selection logic is handled by the `searchPanes.preSelect` option.

```html
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior JavaScript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012-12-02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012-08-06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010-10-14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>JavaScript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009-09-15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008-12-01</td>
            <td>$103,600</td>
        </tr>
    </tbody>
</table>
```

--------------------------------

### Bootstrap Styling Example

Source: https://datatables.net/extensions/scroller/examples/styling/bootstrap.html

This example shows a basic DataTables initialization with Bootstrap styling applied. Ensure Bootstrap CSS is included in your project for this styling to take effect.

```html
<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Zip</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Armand</td>
            <td>Warren</td>
            <td>56045</td>
            <td>Taiwan</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Xenos</td>
            <td>Salas</td>
            <td>71090</td>
            <td>Liberia</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Virginia</td>
            <td>Whitaker</td>
            <td>62723</td>
            <td>Nicaragua</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Kato</td>
            <td>Patrick</td>
            <td>97662</td>
            <td>Palau</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Penelope</td>
            <td>Hensley</td>
            <td>76634</td>
            <td>Greenland</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Georgia</td>
            <td>Erickson</td>
            <td>81358</td>
            <td>Bolivia</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Shad</td>
            <td>Pena</td>
            <td>20600</td>
            <td>Palestinian Territory, Occupied</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Tanisha</td>
            <td>Humphrey</td>
            <td>93371</td>
            <td>Kenya</td>
        </tr>
        <tr>
            <td>9</td>
            <td>Claire</td>
            <td>Espinoza</td>
            <td>I8S 2S8</td>
            <td>Panama</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Raya</td>
            <td>Tucker</td>
            <td>O8D 8W7</td>
            <td>Botswana</td>
        </tr>
        <tr>
            <td>11</td>
            <td>Otto</td>
            <td>Briggs</td>
            <td>57590</td>
            <td>Anguilla</td>
        </tr>
        <tr>
            <td>12</td>
            <td>Logan</td>
            <td>Burt</td>
            <td>53041</td>
            <td>Venezuela</td>
        </tr>
        <tr>
            <td>13</td>
            <td>Cooper</td>
            <td>Pennington</td>
            <td>36994</td>
            <td>France</td>
        </tr>
        <tr>
            <td>14</td>
            <td>Kristen</td>
            <td>Peterson</td>
            <td>52917</td>
            <td>Sao Tome and Principe</td>
        </tr>
        <tr>
            <td>15</td>
            <td>Jordan</td>
            <td>Velasquez</td>
            <td>08884</td>
            <td>Switzerland</td>
        </tr>
        <tr>
            <td>16</td>
            <td>Zelda</td>
            <td>Freeman</td>
            <td>F9H 1J9</td>
            <td>Holy See (Vatican City State)</td>
        </tr>
        <tr>
            <td>17</td>
            <td>Mary</td>
            <td>Pacheco</td>
            <td>A7Y 6X9</td>
            <td>Niger</td>
        </tr>
    </tbody>
</table>
```

--------------------------------

### Luxon Date Formatting Example

Source: https://datatables.net/extensions/columncontrol/examples/searchDates/transform-luxon.html

This example shows how to use Luxon to format a date string for display in a DataTables column. It assumes the 'Start date' column contains date strings that Luxon can parse.

```javascript
const luxon = require('luxon');

const table = new DataTable('#example', {
    columnDefs: [
        {
            targets: [4], // 'Start date' column
            render: function (data, type, row) {
                if (type === 'display') {
                    return luxon.DateTime.fromISO(data).toLocaleString(luxon.DateTime.DATE_MED);
                }
                return data;
            }
        }
    ]
});
```

--------------------------------

### Select API: Initialization and Configuration

Source: https://datatables.net/extensions/select/api

Methods for initializing the Select extension and configuring its behavior, including blurable state, information display, selectable items, keyboard navigation, and item selection style.

```javascript
select();
```

```javascript
select.blurable();
```

```javascript
select.info();
```

```javascript
select.items();
```

```javascript
select.keys();
```

```javascript
select.selectable();
```

```javascript
select.selector();
```

```javascript
select.style();
```

```javascript
select.toggleable();
```

--------------------------------

### Basic Date Formatting with Moment.js

Source: https://datatables.net/extensions/searchbuilder/examples/initialisation/date-fmt.html

This example shows how to format a date column using Moment.js. Ensure Moment.js is included in your project.

```javascript
var table = $('#example').DataTable({
    columnDefs: [
        {
            targets: [2, 3],
            render: function (data, type, row) {
                return type === 'display' ?
                    moment.unix(data).format('YYYY/MM/DD') :
                    data;
            }
        }
    ]
});
```

--------------------------------

### Basic Table Initialization

Source: https://datatables.net/extensions/rowgroup/examples/initialisation/endRender.html

Initialize a DataTables table with default settings. This is the most common way to get started.

```javascript
$(document).ready( function() {
    $('#example').DataTable();
} );
```

--------------------------------

### Basic JavaScript Initialisation

Source: https://datatables.net/extensions/buttons/examples/initialisation/new.html

Initialise DataTables on an existing HTML table using its ID. This is the most common way to get started.

```javascript
$(document).ready(function() {
    $('#example').DataTable();
} );
```

--------------------------------

### Basic Buttons Initialisation

Source: https://datatables.net/extensions/buttons/examples/initialisation/topLevel.html

This example shows the fundamental way to initialise DataTables with the Buttons extension using the top-level `buttons` option. Ensure you have included the necessary DataTables and Buttons CSS and JavaScript files.

```javascript
new DataTable('#myTable', {
    layout: {
        topStart: 'buttons'
    }
});
```

--------------------------------

### Basic FixedColumns Table

Source: https://datatables.net/extensions/colreorder/examples/integration/fixedcolumns.html

This example shows a basic DataTables setup with the FixedColumns extension enabled. It requires the DataTables and FixedColumns CSS and JS files.

```html
<table id="example" class="display nowrap">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>t.nixon@datatables.net</td>
        </tr>
        <tr>
            <td>Garrett</td>
            <td>Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011-07-25</td>
            <td>$170,750</td>
            <td>8422</td>
            <td>g.winters@datatables.net</td>
        </tr>
        <tr>
            <td>Ashton</td>
            <td>Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009-01-12</td>
            <td>$86,000</td>
            <td>1562</td>
            <td>a.cox@datatables.net</td>
        </tr>
        <tr>
            <td>Cedric</td>
            <td>Kelly</td>
            <td>Senior JavaScript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012-03-29</td>
            <td>$433,060</td>
            <td>6224</td>
            <td>c.kelly@datatables.net</td>
        </tr>
        <tr>
            <td>Airi</td>
            <td>Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008-11-28</td>
            <td>$162,700</td>
            <td>5407</td>
            <td>a.satou@datatables.net</td>
        </tr>
        <tr>
            <td>Brielle</td>
            <td>Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012-12-02</td>
            <td>$372,000</td>
            <td>4804</td>
            <td>b.williamson@datatables.net</td>
        </tr>
    </tbody>
</table>
```

--------------------------------

### State Save with Data Example

Source: https://datatables.net/extensions/select/examples/initialisation/stateSave.html

This JSON data represents a typical structure for saving DataTables state, including information about columns, start index, search, and order.

```json
{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "id": "4",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "5",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "6",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    },
    {
      "id": "7",
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012/08/06",
      "office": "San Francisco",
      "extn": "9608"
    },
    {
      "id": "8",
      "name": "Rhona Davidson",
      "position": "Integration Specialist",
      "salary": "$327,900",
      "start_date": "2010/10/14",
      "office": "Tokyo",
      "extn": "6200"
    },
    {
      "id": "9",
      "name": "Colleen Hurst",
      "position": "Javascript Developer",
      "salary": "$205,500",
      "start_date": "2009/09/15",
      "office": "San Francisco",
      "extn": "2360"
    },
    {
      "id": "10",
      "name": "Sonya Frost",
      "position": "Software Engineer",
      "salary": "$103,600",
      "start_date": "2008/12/13",
      "office": "Edinburgh",
      "extn": "1667"
    },
    {
      "id": "11",
      "name": "Jena Gaines",
      "position": "Office Manager",
      "salary": "$90,560",
      "start_date": "2008/12/19",
      "office": "London",
      "extn": "3814"
    },
    {
      "id": "12",
      "name": "Quinn Flynn",
      "position": "Support Lead",
      "salary": "$342,000",
      "start_date": "2013/03/03",
      "office": "Edinburgh",
      "extn": "9497"
    },
    {
      "id": "13",
      "name": "Charde Marshall",
      "position": "Regional Director",
      "salary": "$470,600",
      "start_date": "2008/10/16",
      "office": "San Francisco",
      "extn": "6741"
    }
  ]
}
```

--------------------------------

### Initializing DateTime with Options

Source: https://datatables.net/extensions/datetime/option

Demonstrates how to initialize the DateTime picker with custom options using both vanilla JavaScript and jQuery.

```APIDOC
## Initializing DateTime with Options

### Description
This section shows how to apply configuration options when initializing the DataTables DateTime picker. You can pass an object containing various settings to customize its behavior.

### JavaScript Initialization

```javascript
new DateTime(document.getElementById('myInput'), {
    format: 'D MMM YYYY HH:mm'
});
```

### jQuery Initialization

```javascript
$('#myInput').dtDateTime({
    format: 'D MMM YYYY HH:mm'
});
```

### Options Reference

The following options can be configured:

**DateTime Core Options:**

- `alwaysVisible` (boolean): Makes the date picker always display.
- `buttons` (object): Container for navigation buttons.
  - `buttons.clear` (boolean): Enable button to clear the value.
  - `buttons.selected` (boolean): Enable button to move the current value into view.
  - `buttons.today` (boolean): Enable button to move "today" into view.
- `disableDays` (array): Specify days that cannot be selected.
- `firstDay` (number): Change which day of the week is first on the calendar.
- `format` (string): The format of the date data.
- `hoursAvailable` (array): Sets which hours are selectable.
- `i18n` (object): DateTime language options.
  - `i18n.amPm` (array): The strings appended to hours to distinguish between am and pm.
  - `i18n.clear` (string): Clear button text value.
  - `i18n.hours` (string): Label for the hours selection.
  - `i18n.minutes` (string): Label for the minutes selection.
  - `i18n.months` (array): Text used to indicate the months available for selection.
  - `i18n.next` (string): String to use in the next button.
  - `i18n.previous` (string): String to use in the previous button.
  - `i18n.seconds` (string): Label for the seconds selection.
  - `i18n.selected` (string): Selected button text value.
  - `i18n.today` (string): Today button text value.
  - `i18n.unknown` (string): String to use if a value is unknown.
  - `i18n.weekdays` (array): Text used to indicate the days of the week.
- `locale` (string): The locale that DateTime should use.
- `maxDate` (string|Date): Set the maximum date that can be selected and displayed.
- `minDate` (string|Date): Set the minimum date that can be selected and displayed.
- `minutesAvailable` (array): Sets which minutes are selectable.
- `onChange` (function): Function that is called whenever the value selected for DateTime changes.
- `secondsAvailable` (array): Sets which seconds are selectable.
- `showWeekNumber` (boolean): Whether the week number should be shown.
- `yearRange` (string): The range of years provided for selection.
```

--------------------------------

### DataTables Initialization with Column Reordering and Visibility

Source: https://datatables.net/extensions/columncontrol/examples/colReorder/withColumnVisibility.html

Example of initializing DataTables with extensions for column reordering and visibility control. This setup allows for dynamic manipulation of table columns.

```javascript
new DataTable('#example', {
    layout: {
        top: 'search'
    },
    columnDefs: [
        {
            targets: [0, 1, 2, 3, 4, 5],
            // You can also use 'visible' to control the initial visibility of columns
            // visible: false
        }
    ],
    colReorder: true,
    columnVisibility: true
});
```

--------------------------------

### JSON Data for DataTables

Source: https://datatables.net/extensions/responsive/examples/column-control/classes.html

This is an example of the JSON data structure used to populate the DataTables instance. It includes fields for name, position, salary, start date, office, and extension.

```json
{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011-04-25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011-07-25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009-01-12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "id": "4",
      "name": "Cedric Kelly",
      "position": "Senior JavaScript Developer",
      "salary": "$433,060",
      "start_date": "2012-03-29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "5",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008-11-28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "6",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012-12-02",
      "office": "New York",
      "extn": "4804"
    },
    {
      "id": "7",
      "name": "Herrod Chandler",
      "position": "Sales Assistant",
      "salary": "$137,500",
      "start_date": "2012-08-06",
      "office": "San Francisco",
      "extn": "9632"
    }
```

--------------------------------

### Initialize DataTables with KeyTable using Vanilla JS

Source: https://datatables.net/extensions/keytable/examples/styling/bootstrap.html

This snippet demonstrates initializing DataTables with KeyTable using the vanilla JavaScript API. Ensure the necessary DataTables/KeyTable Bootstrap JS files are included.

```javascript
new DataTable( "#example", {
    keys: true
});
```

--------------------------------

### Server-Side Processing Script Example (PHP)

Source: https://datatables.net/extensions/staterestore/examples/initialisation/predefined.html

This PHP script demonstrates a basic server-side processing setup for DataTables. It handles data retrieval and formatting for dynamic table updates.

```php
<?php

// Example server-side processing script for DataTables

// Database connection details (replace with your actual credentials)
$db_host = 'localhost';
$db_user = 'username';
$db_pass = 'password';
$db_name = 'database_name';

$conn = new mysqli($db_host, $db_user, $db_pass, $db_name);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Fetch data from the database
$sql = "SELECT name, position, office, age, start_date, salary FROM employees";
$result = $conn->query($sql);

$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = array(
            "name" => $row['name'],
            "position" => $row['position'],
            "office" => $row['office'],
            "age" => $row['age'],
            "start_date" => $row['start_date'],
            "salary" => $row['salary']
        );
    }
}

// Output data as JSON
header('Content-Type: application/json');
echo json_encode(array(
    "data" => $data
));

$conn->close();
?>

```