I am trying to figure out how to update the hoursAvailable when the user selects a date from the dateTime picker within an editor. If it is the current date I only want to allow hours up to current hour but if it is a previous date I want to allow all hours. but when I look at the following URL (hoursAvailable) it only shows the following example which isn't helpful within the editor:

$(document).ready(function () {
    new DateTime(document.getElementById('test'), {
        hoursAvailable: [8, 9, 10]
    });
});

I can't find any example for setting it like I would for maxDate in the dependent method like this:

        proxCardLotAccessEditor.field.dependent('actualUsageDateTime',
            function(val, data, callback, e) {
             ....
                     proxCardLotAccessEditor.field('effectiveDate').maxDate(maxDate);
             ....
           });

How can I dynamically update hoursAvailable option on a dateTime field in and editor when the date is changed?

Regards,

RobO.

Is it possible to pre-filter a dataTable based on the selection of a select dropdown list? I know that you can do this with search terms, but I have not found an example of this being done with a select dropdown list. I would like to be able to type in a URL similar to www.URL.com/?search= but instead with the select dropdown pre-filtered.

Hi Guys, I have a problem using the ScrollY propiety:

When resize the window the header doesn't adjust with the table.

I share with you a link to show you an example:

https://live.datatables.net/kucuribu/1/edit

I use Datable 1.11.5 and Bootstrap 3.3.6.

I really think is some class from Bootstrap because when I change the clases that livedatable has as default on its tamplete, and only then, the problem appears.

Link to test case:
This works with datatable 1.13.X -> https://live.datatables.net/mexezomi/2/edit
The same code but running on datatable 2.0.X, doesn't work -> https://live.datatables.net/waqunabe/2/edit

Error messages shown:
"TypeError: this.nodes is not a function ...

Description of problem:
I have this table that rows can be added dynamically and every row have input for the user put some values, and finally I get this data with the datatable API functions as rows.every(), then I get the inputs with this.nodes().to$().find("input").
When I upgrade datatables to version 2 this stoped working getting an error.
Do you have any suggestion to improve this code and make it compatible with datatable 2?
Thank You!!

var table = new DataTable("#example",{
  paging:false,
  columns: [
    {
      "data":null,
      "title": "A",
      render: function(data, type, full, meta){
        return "<input type='text' value='ValueA' name='A' id='id_a'>";
      }
    },
    {
      "data":null,
      "title": "B",
      render: function(data, type, full, meta){
        return "<input type='text' value='ValueB' name='B' id='id_b'>";
      }
    },
    {
      "data":null,
      "title": "C",
      render: function(data, type, full, meta){
        return "<input type='text' value='ValueC' name='C' id='id_b'>";
      }
    }
    ,
    {
      "data":null,
      "title": "<button id='add_row'>add+</button>",
      "defaultContent" : ""
    }
  ],
  data: [{},{}]
});

table.off("click").on("click", "#add_row", function(){
  table.row.add({});
  table.draw();
});

function saveValues(){
  let arrValues = [];
  table.rows().every(function (rowIdx, tableLoop, rowLoop){
    // this.nodes() doesnt work with datatables 2.x.x
    let cells = this.nodes().to$().find("input"); 
    
    let data = '{';
    for (const cell of cells){
      data += `"${cell.name}" : "${cell.value}",`;
    }
    data = data.slice(0,-1);
    data += '}';
    data = JSON.parse(data);       
    arrValues.push(data);
  });
  console.log(arrValues);
}

I'm seeing both in CDNJS for download but on the site here, the CDN references only 2.0.8.

Is 2.1.1 ready or is 2.0.8 latest stable?

Disregard, I should have searched first. I saw that it is not a valid build.

While using a basic responsive DataTable like the one found here: https://datatables.net/extensions/responsive/examples/initialisation/option.html , I am seeking a solution to maintain row striping, where child rows inherit the same color as their parent rows.

In the provided example, the first row "Airi Satou" is gray, and the second row "Angelica Ramos" is white. However, when expanding the child row of "Airi Satou," the child row appears white, and "Angelica Ramos" turns gray. This inconsistency can be confusing, as it becomes unclear whether the child row belongs to the row above or below.

Ensuring that child rows retain the same background color as their parent rows would greatly enhance clarity. This issue is particularly pronounced when using the "Responsive.display.childRowImmediate" option, where the absence of a down arrow further complicates visual distinction.

Any guidance on how to achieve this would be greatly appreciated.

Link to test case: https://jsbin.com/nicuwareti/4/edit?html,output
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Why does this date format give invalid date error? How can I solve the problem? For example : 01.01.2023 22:00:30 I want the data to be sorted correctly

I have been using v1.10.20 for a while and am building new tables so I have started using v2.0.8. I essentially copied my existing table and changed the needed column load, so nothing has changed in the options the table is built.

However, the sorting of columns does not perform the same between versions and I am not sure if there is a new setting I am missing. in version 1.10 I could sort column 1, then columns 2. And the result would be column 1 keep its applied sorting, and column 2 would add to the sorting so to speak.

Now with v2, it seems to remove the previous sort and apply the new sort to the column.

I am not sure how I get the old form of sorting re applied to the new version.

More clearer example:

Initial column load
Column 1        Column 2
7                    1
9                    0
1                    0
5.5                  1

v1.10 sorting
Sort Column 1

Column 1       Column 2
1                  0
5.5                1
7                  1
9                  0

Sort Column 2

Column 1      Column2
1                   0
9                   0
5.5                 1
7                   1


V2 sorting
Sort Column 1

Column 1       Column 2
1                 0
5.5               1
7                 1
9                 0

Sort Column 2

Column 1        Column 2
9                    0
1                    0
7                    1
5.5                  1

hi team,

i stumbled across the following phenomenon:

by applying the className: 'btn btn-xxxxxx', i.e.

                            extend: 'selectedSingle',
                                className: 'btn btn-warning',
                                text: 'bearbeiten',
                                action: function (e, dt, node, config) {
                                    editContact(dt);
                                }
                            }

datatables is changing the button color to all available bootstrap button colors BUT btn-primary! if i define 'btn btn-primary' the buttons stay in the datatables defaultt color: grey.

btw, this phenomenon applies also to the datatables 'csv, pdf, excel' buttons

am i doing something wrong or is it expected default behaviour?

cheers
tomek

I can't seem to get rid of the vertical scroll bar when using FixedColumns. My init code is below.
I've tried scrollY: false but makes no diff. Otherwise the feature works great. Any suggestions?

.DataTable(
     {
         scrollX: true,
         fixedColumns: {
             start: 2
         },
         paging: false,
         order: [], // turns off default sorting which appears on first col
          columnDefs: [
             {
                 "orderable": true, // class leader is sortable
                 "targets": 5
             },
             {
                 "orderable": false, // all the other cols have no-sort class. Do not allow sorting
                 "targets": "no-sort"
             }]      
     });

How can mobile app development services enhance user engagement and retention for our app? Explore the strategies and benefits that professional mobile app development can offer to keep users actively engaged and loyal to your application. Learn how personalized user experiences, optimized performance, intuitive design, and continuous updates contribute to maximizing user satisfaction and retention rates.

Link to test case:
https://staging.rightlivelihood.org/staff/

Debugger code (debug.datatables.net):
ogumal

Error messages shown:
no error message

Description of problem:
I am rebuilding a client's old Wordpress website in Gutenberg and I have built a custom block for the staff archive, using DataTables (with RowGroup and enum plugin) to display the grid and filtration.
Locally everything is done and working well but on the staging site the rowGroup feature is not working. The staff is supposed to be grouped by teams is this particular order, set by enum plugin:
let positionOrder = DataTable.enum(["Executive Team", "Administration & Finance", "Research", "Supporting the Laureates", "Communications"]);

I am using CDN for the DataTable js and css and just updated to the latest version (2.0.8) but it didn't help. Maybe it could work better if I install it with npm instead but have not tried that yet.

I can't provide the debugger as i'm using custom compiler in laravel but i can provide the code: https://pastebin.com/Kj7uFnJt

It's my first time using it and i didnt understand it very well
- everything in the .js or .css locates on resources/src/(js, css), so thats why the import is big -

https://live.datatables.net/vozojago/1/edit

Steps to reproduce:
-move the far right column (Salary) to the far left (left of Name)
-sort the column to the right of it (the second column, Name) by clicking the <th>
-reload the page and see that the sort is not happening on a new column (it jumps 2 columns to the right to Office). If you moved 2 columns to the left of Name and reloaded, the sort jumps 4 columns.

It seems to trigger any time you move a column that would have been the right of a sorted column to the left of it. If you move columns that are already to the right of a sorted column (and keep them to the right of it) then the issue doesn't occur.

Any tips? I have a user story complaining about this in Production. I was going to start tackling some custom solution, but wanted to know if you all were aware and had a fix. Thanks in advance!

Hi
In my project I use livewire with datatable and modal. When I show modal:
public function show($regeneration)
{

$this->dispatch('open-modal', 'detailsModal');
}

all add-ons such as search engine, sorting and paging disappear.

When I close modal still all adds are unavilable

I tried :
$('#tabela').DataTable().ajax.reload();
but still nothing

Why?
How to reload datatable?
BR

Link to test case: https://live.datatables.net/dubevewa/3/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I need to get the conditionName property from any searchBuilder's condition. How can I access this property ?
I have try searchBuilder.getDetails() but It doesn't have the conditionName property, only the condition property which is not what's shown to the user.

What i'm trying to do is to have a recap in string format of all the searchBuilder's current criterias, and instead of having xxx = xxx I want xxx is equals (or whatever you have set it) to xxx.
I have kinda found a way but it doesn't seem to be very clean to access it like that ?

I have three tables:

TABLE entrepots :
id_entrepots int(200) NOT NULL,
nom_entrepots varchar(150) NOT NULL,

TABLE equipements :
nom_equipements varchar(200) NOT NULL,
groupe_equipements varchar(200) NOT NULL,
periodicite_equipements varchar(100) NOT NULL

TABLE controles :
id_controles int(200) NOT NULL,
date_controles_realiser date NOT NULL,
date_prochain_controles date NOT NULL,
date_rdv date NOT NULL,
etat_controles varchar(10) NOT NULL,

With the right leftovers to make it all work.

My problem:
When I open the modal to edit the data, I want to update several columns after modifying the date_controles_realiser.
example
date_controles_realiser in database is 2023-06-12
If I change it to 2024-06-12 and click on UPDATE :
Datatable will then display the new date in date_prochain_controles according to the data in the periodicite_equipements column (Annual, monthly, half-yearly, ...).
EX: if it's Annual, the new date date_prochain_controles will be 2024-06-12 and etat_controles will be "GREEN" if date_controles_realiser is less than or equal to the current date AND the date_rdv will be empty.

But I have no idea how to implement this Datatable Editor (version 1.9)

my code :

var editor; // use a global for the submit and return data rendering in the examples


    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td.editable', function (e) {
        editor.inline( this, {
            //onBlur: 'submit'
            buttons: {  label: ">",
                        className: 'btn-sm',            
                        fn: function () { this.submit(); } }
        } );
    } );
    
    
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns([1,2,3,4,5,13]).every( function () {
                var column = this;
                var select = $('<select><option value="">ALL</option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? ''+val+'' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },
        dom: "Bfrtip",
        ajax: {
            url: "Staff_4.php",
            type: 'POST'
        },
        serverSide: false,
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false,
                searchable: false
            },
            
            { data: "controles.etat_controles", className: "dt-body-center" , 
                    target: [1],
                    type: "alt-string",
                    render: function ( data, type, row ) {
                      
                      if (type !== 'display') {
                        return data;
                      }
                      const icons = {
                        "BLANC": '<img src="img/blanc.gif" width="34" height="18" alt="BLANC" title="BLANC"/>',
                        "NOIR": '<img src="img/noir.gif" width="34" height="18" alt="NOIR" title="NOIR"/>',
                        "VERT": '<img src="img/vert.gif" width="34" height="18" alt="VERT" title="VERT"/>',
                        "ORANGE": '<img src="img/orange.gif" width="34" height="18" alt="ORANGE" title="ORANGE"/>',
                        "ROUGE": '<img src="img/rouge.gif" width="34" height="18" alt="ROUGE" title="ROUGE"/>',
                        "BLEU": '<img src="img/bleu.gif" width="34" height="18" alt="BLEU" title="BLEU"/>',
                      };

                      const values = data.split(', ');
                      let result = '';
                      values.forEach((value) => {
                        if (value.trim() in icons) {
                          result += icons[value.trim()];

                        } else {
                          result += value.trim();

                        }
                        result += ' '; // add space between values
                      });

                      return result.trim(); // remove extra space at the end

                    }
            
            },
            { data: "entrepots.nom_entrepots", editField: "controles.fk_entrepots", className: "dt-body-left", searchable: true },
            { data: "equipements.nom_equipements", editField: "controles.fk_equipements", className: "dt-body-left", searchable: true },
            { data: "equipements.groupe_equipements", className: "editable dt-body-center" },
            { data: "equipements.periodicite_equipements", className: "editable dt-body-center" },
            { data: "controles.date_controles_realiser", className: "editable dt-body-center" },
            { data: "controles.date_prochain_controles", className: "editable dt-body-center" },
            { data: "controles.date_rdv", className: "editable dt-body-center" },
            { data: "controles.commentaire", className: "dt-body-center"},
            { data: "controles.lien_fichier1", className: "dt-center",
            
                render: function ( data, type, row, meta ) {
                    if (data.startsWith('https://')){
                        return '<a href="'+data+'" target="_blank"><i class="fa fa-cloud" style="font-size:30px;color:lightgreen;text-shadow:2px 2px 4px #000000;" /></a>';     
                    }else{return data;} 
                }
            
            },
            { data: "controles.lien_fichier2", className: "dt-body-center", 
            
                render: function ( data, type, row, meta ) {
                    if (data.startsWith('https://')){
                        return '<a href="'+data+'" target="_blank"><i class="fa fa-cloud" style="font-size:30px;color:lightgreen;text-shadow:2px 2px 4px #000000;" /></a>';     
                    }else{return data;} 
                }
                
            },
            { data: "controles.lien_fichier3", className: "dt-body-center",
            
                render: function ( data, type, row, meta ) {
                    if (data.startsWith('https://')){
                        return '<a href="'+data+'" target="_blank"><i class="fa fa-cloud" style="font-size:30px;color:lightgreen;text-shadow:2px 2px 4px #000000;" /></a>';     
                    }else{return data;} 
                }   
            
            },
            { data: "controles.actif_controles", className: "dt-body-center" }
        ],
        order: [ 2, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove',   editor: editor },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            },
            { extend: 'pageLength',   editor: editor }
        ]
    } );
} );

And server :

Editor::inst( $db, 'controles', 'id_controles' )
    ->field( 
        //Field::inst( 'controles.id_controles' ),
        Field::inst( 'controles.etat_controles' ),
        
        Field::inst( 'controles.fk_entrepots' )
            ->options( Options::inst()
                ->table( 'entrepots' )
                ->value( 'id_entrepots' )
                ->label( 'nom_entrepots' )
            )
            ->validator( Validate::dbValues() ),
        Field::inst( 'entrepots.nom_entrepots' ),
         
        Field::inst( 'controles.fk_equipements' )
            ->options( Options::inst()
                ->table( 'equipements' )
                ->value( 'id_equipements' )
                ->label( 'nom_equipements' )
            )
            ->validator( Validate::dbValues() ),
        Field::inst( 'equipements.nom_equipements' ),
        
        Field::inst( 'equipements.groupe_equipements' ),
        Field::inst( 'equipements.periodicite_equipements' ),
        Field::inst( 'controles.date_controles_realiser' )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
            ->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
            ->getFormatter( function ( $val, $data, $opts ) { 
                if ($val === "0000-00-00"){ echo ""; }else{ return date( 'Y-m-d', strtotime( $val ) ); } 
                } ),
        Field::inst( 'controles.date_prochain_controles' )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
            ->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
            ->getFormatter( function ( $val, $data, $opts ) { 
                if ($val === "0000-00-00"){ echo ""; }else{ return date( 'Y-m-d', strtotime( $val ) ); } 
                } ),
        Field::inst( 'controles.date_rdv' )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
            ->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
            ->getFormatter( function ( $val, $data, $opts ) { 
                if ($val === "0000-00-00"){ echo ""; }else{ return date( 'Y-m-d', strtotime( $val ) ); } 
                } ),
        Field::inst( 'controles.commentaire' ),
        Field::inst( 'controles.lien_fichier1' ),
        Field::inst( 'controles.lien_fichier2' ),
        Field::inst( 'controles.lien_fichier3' ),
        Field::inst( 'controles.actif_controles' )
        
    )
    
    ->leftJoin( 'entrepots', 'entrepots.id_entrepots', '=', 'controles.fk_entrepots' )
    ->leftJoin( 'equipements', 'equipements.id_equipements', '=', 'controles.fk_equipements' )
    ->debug(false)
    ->process($_POST)
    ->json();

thank you for your help as I don't know how to go about it

I have a table that looks like this:

<DataTable :columns="columnOptions" :data="rows" :options="options">
  <thead>
    <tr>
      <th>One</th>
    </tr>
  </thead>
  <template #custom="props">
    <MyComponent :label="props.cellData" />
  </template>
</DataTable>

const columnOptions = [{
  render: '#custom',
  data: 'one',
  defaultContent: ''
}]

If MyComponent is pretty simple that works. But if it has any call that requires getCurrentInstance it fails. I looked at the value of that when I call MyComponent normally and when I call it from inside the DataTable and I see that the app is set to null and that throws an error. (An easy way to get this error is by including the i18n object)

Here is MyComponent.vue:

<template>
  <span>
    {{label}}
  </span>
</template>

<script setup lang="ts">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { getCurrentInstance } from 'vue'
import { useI18n } from 'vue-i18n'

const instance = getCurrentInstance()
console.log("instance:", instance.appContext.app)

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { t } = useI18n({ useScope: 'global' })

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
    label: string;
}>()
</script>

That is, when I run this I get null in the console.

Is there some context I'm supposed to pass in?

Hi, I can update each individual row without problem.
Now, I want to update all rows visible after filtering at once.

Example this picture.

I want to assign the same value to "Position" column where st_id (not shown to viewer) are the ones corresponding to shown rows (either 10 or 11 - whichever is easier to achieve).

Currently my script for updating individual row is:

function editData(user_data){
  $('.frm-status').html('');
  $('#userModalLabel').html('Edit Data #'+user_data.st_id>);

  $('#recordID').val(user_data.st_id>);

<?php foreach ($modal as $key => $value) {
    echo "$('#".$key."').val(user_data.".$value.");";
  } ?>

  $('#userDataModal').modal('show');
} 

Can someone please help to modify this script to achieve my goal?
Thank you so much.

I am just starting a major upgrade to DT v2.0. I note in the documentation there are two methods structures...

1. new DataTable('#mainTable', { // Newest structure
2. oTable = $('#mainTable').DataTable( { // Presently used structure

Both seem to work but Is one preferred over the other.

jdadwilson