Datatables 2.0 – Set a Table with Custom Layout Using Default Controls

Are you tired of dealing with clunky tables that are a nightmare to navigate? Do you want to create a table that is not only functional but also visually appealing? Look no further! In this article, we will show you how to set a table with a custom layout using the default controls of Datatables 2.0.

What is Datatables 2.0?

Datatables 2.0 is a popular jQuery plugin that allows you to create interactive and customizable tables. It provides a range of features, including filtering, sorting, and pagination, making it an essential tool for anyone working with large datasets.

Why Use Custom Layout with Datatables 2.0?

Using a custom layout with Datatables 2.0 provides a range of benefits, including:

• Improved user experience: A well-designed table is easier to navigate and understand, improving the overall user experience.
• Increased flexibility: A custom layout allows you to tailor your table to your specific needs, providing greater flexibility and control.
• Enhanced visualization: A custom layout can help to highlight important data and trends, making it easier to identify patterns and trends.

Setting Up Datatables 2.0

To get started with Datatables 2.0, you will need to include the jQuery library and the Datatables 2.0 plugin in your HTML file:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.jqueryui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.jqueryui.min.css">

Creating a Basic Table

Before we dive into creating a custom layout, let’s start by creating a basic table. Add the following HTML code to your file:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Occupation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>Software Engineer</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Marketing Manager</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>35</td>
      <td>Sales Representative</td>
    </tr>
  </tbody>
</table>

Next, add the following JavaScript code to initialize the Datatables 2.0 plugin:

<script>
  $(document).ready(function() {
    $('#myTable').DataTable();
  });
</script>

Creating a Custom Layout

Now that we have a basic table set up, let’s create a custom layout using the default controls of Datatables 2.0. We will create a table with a custom header, footer, and body layout.

Custom Header

To create a custom header, we will use the `header` option of Datatables 2.0. Add the following code to your JavaScript file:

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "header": function (_row, data, index) {
        return '<th style="background-color: #f0f0f0;">' + data + '</th>';
      }
    });
  });
</script>

This code will create a custom header with a light grey background color.

Custom Footer

To create a custom footer, we will use the `footer` option of Datatables 2.0. Add the following code to your JavaScript file:

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "footer": function (_row, data, index) {
        return '<th style="background-color: #f0f0f0;">' + data + '</th>';
      }
    });
  });
</script>

This code will create a custom footer with a light grey background color.

Custom Body

To create a custom body, we will use the `columns` option of Datatables 2.0. Add the following code to your JavaScript file:

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "columns": [
        { "title": "Name", "data": "name", "render": function (data, type, row) {
          return '<strong>' + data + '</strong>';
        }},
        { "title": "Age", "data": "age", "render": function (data, type, row) {
          return '<em>' + data + '</em>';
        }},
        { "title": "Occupation", "data": "occupation", "render": function (data, type, row) {
          return '<span style="color: #008000;">' + data + '</span>';
        }}
      ]
    });
  });
</script>

This code will create a custom body with bold names, italic ages, and green occupations.

Putting it All Together

Now that we have created a custom header, footer, and body, let’s put it all together. Add the following code to your JavaScript file:

<script>
  $(document).ready(function() {
    $('#myTable').DataTable({
      "header": function (_row, data, index) {
        return '<th style="background-color: #f0f0f0;">' + data + '</th>';
      },
      "footer": function (_row, data, index) {
        return '<th style="background-color: #f0f0f0;">' + data + '</th>';
      },
      "columns": [
        { "title": "Name", "data": "name", "render": function (data, type, row) {
          return '<strong>' + data + '</strong>';
        }},
        { "title": "Age", "data": "age", "render": function (data, type, row) {
          return '<em>' + data + '</em>';
        }},
        { "title": "Occupation", "data": "occupation", "render": function (data, type, row) {
          return '<span style="color: #008000;">' + data + '</span>';
        }}
      ]
    });
  });
</script>

And that’s it! You now have a table with a custom layout using the default controls of Datatables 2.0.

Conclusion

In this article, we have shown you how to set a table with a custom layout using the default controls of Datatables 2.0. By using the `header`, `footer`, and `columns` options, you can create a table that is not only functional but also visually appealing. Remember to experiment with different options and settings to create a table that meets your specific needs.

Happy coding!