jquery - Columndefs working Datatables

Jquery - Columndefs working Datatables

Using columnDefs in DataTables allows you to define specific settings for individual columns. This is useful for custom rendering, setting default values, enabling/disabling sorting, and more. Here's a guide on how to use columnDefs with DataTables in jQuery.

Step-by-Step Guide

  1. Include DataTables Library: Make sure you include jQuery and DataTables library in your project.

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataTables Example</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> </head> <body> <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> <!-- Add table data here --> </tbody> </table> <script src="script.js"></script> </body> </html> 
  2. Initialize DataTables with columnDefs: In your script.js file (or within a <script> tag), initialize the DataTable and use columnDefs to apply specific settings to columns.

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "targets": 0, // Apply settings to the first column "visible": true, // Make this column visible "searchable": true // Make this column searchable }, { "targets": 1, // Apply settings to the second column "orderable": false // Disable sorting on this column }, { "targets": 2, // Apply settings to the third column "render": function(data, type, row) { // Custom rendering for the third column return '<b>' + data + '</b>'; } }, { "targets": 3, // Apply settings to the fourth column "className": "dt-center" // Center align text } ] }); }); 

Explanation

  • targets: Specifies which column the settings should be applied to. You can use column index (starting from 0) or column name.
  • visible: Controls whether the column should be visible or hidden.
  • searchable: Determines whether the column should be searchable.
  • orderable: Specifies if the column should be sortable.
  • render: Allows for custom rendering of column data.
  • className: Adds a class to the column cells for styling purposes.

Example with Data

Add some data to the table for demonstration purposes:

<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> <!-- Add more rows as needed --> </tbody> 

Full Example

Here's a full example integrating everything together:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataTables Example</title> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> </head> <body> <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> <!-- Add more rows as needed --> </tbody> </table> <script> $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "targets": 0, // Apply settings to the first column "visible": true, // Make this column visible "searchable": true // Make this column searchable }, { "targets": 1, // Apply settings to the second column "orderable": false // Disable sorting on this column }, { "targets": 2, // Apply settings to the third column "render": function(data, type, row) { // Custom rendering for the third column return '<b>' + data + '</b>'; } }, { "targets": 3, // Apply settings to the fourth column "className": "dt-center" // Center align text } ] }); }); </script> </body> </html> 

This example demonstrates how to use columnDefs to customize the behavior and appearance of specific columns in a DataTable. Adjust the CSS_SELECTOR_FOR_PRICE_ELEMENTS, CSS classes, and other configurations as needed for your particular use case.

Examples

  1. How to define column properties using columnDefs in jQuery DataTables? Description: This query involves setting specific properties for columns in a DataTable, such as making columns non-searchable. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "searchable": false, "targets": [0, 2] } // Makes columns 0 and 2 non-searchable ] }); }); 
  2. How to use columnDefs to define default content for empty cells in jQuery DataTables? Description: This query demonstrates setting default content for columns that may have empty cells. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "defaultContent": "-", "targets": "_all" } // Sets default content for all columns ] }); }); 
  3. How to apply class to specific columns using columnDefs in jQuery DataTables? Description: This query shows how to add a CSS class to specific columns. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "className": "text-center", "targets": [1, 3] } // Adds 'text-center' class to columns 1 and 3 ] }); }); 
  4. How to set column visibility using columnDefs in jQuery DataTables? Description: This query involves hiding specific columns using columnDefs. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "visible": false, "targets": [2] } // Hides column 2 ] }); }); 
  5. How to set column width using columnDefs in jQuery DataTables? Description: This query demonstrates how to set a fixed width for specific columns. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "width": "20%", "targets": 0 }, // Sets width of column 0 to 20% { "width": "30%", "targets": 1 } // Sets width of column 1 to 30% ] }); }); 
  6. How to apply render functions to columns using columnDefs in jQuery DataTables? Description: This query involves using a render function to format data in specific columns. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "targets": 2, "render": function (data, type, row) { return data.toUpperCase(); // Converts data in column 2 to uppercase } } ] }); }); 
  7. How to set ordering for specific columns using columnDefs in jQuery DataTables? Description: This query demonstrates how to disable ordering on specific columns. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "orderable": false, "targets": [0, 3] } // Disables ordering for columns 0 and 3 ] }); }); 
  8. How to use columnDefs to set default sorting direction in jQuery DataTables? Description: This query involves setting the default sorting direction for specific columns. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "orderData": [0, 1], "targets": [0] }, // Sets default sort on column 0 using column 0 and 1 data { "orderData": [1, 2], "targets": [1] } // Sets default sort on column 1 using column 1 and 2 data ] }); }); 
  9. How to use columnDefs to make specific columns editable in jQuery DataTables? Description: This query demonstrates how to make specific columns editable using an external library like jEditable. Code:

    $(document).ready(function() { var table = $('#example').DataTable({ "columnDefs": [ { "targets": [1, 2], "createdCell": function (td, cellData, rowData, row, col) { $(td).attr('contenteditable', 'true'); // Makes columns 1 and 2 editable } } ] }); }); 
  10. How to use columnDefs to add custom button actions in jQuery DataTables? Description: This query involves adding custom buttons to specific columns with event handlers. Code:

    $(document).ready(function() { $('#example').DataTable({ "columnDefs": [ { "targets": -1, "data": null, "defaultContent": "<button class='btn btn-primary'>Action</button>" } ] }); $('#example tbody').on('click', 'button', function () { var data = $('#example').DataTable().row($(this).parents('tr')).data(); alert('Button clicked in row: ' + data[0]); // Display data from the first column }); }); 

More Tags

microsoft-graph-files reduce ssh-tunnel structure command-line-arguments apple-push-notifications nullable daemons pre-commit productivity-power-tools

More Programming Questions

More Mixtures and solutions Calculators

More Housing Building Calculators

More Geometry Calculators

More Auto Calculators