get: function ( conf ) {
        return conf._quill.getText();
    },
  
    set: function ( conf, val ) {
        conf._quill.setText( val !== null ? val : '' );
    },

by

    get: function ( conf ) {
        return conf._quill.root.innerHTML;
    },
 
    set: function ( conf, val ) {
        conf._quill.root.innerHTML = val !== null ? val : '';
    },

KR,
Bjørn H

How can I get this control labels traduced?

Thanks,
Jon

below is my table HTML and JS

      <table id="purchaseorders" class="datatables-purchaseorders table nowrap" width="100%">
        <thead>
          <tr>
            <th data-priority="1" class=""></th>
            <th data-priority="2" class="all">PO #</th>
            <th data-priority="5" >Vendor</th>
            <th class="">Job Ref</th>
            <th>Date Created</th>
            <th>Created By</th>
            <th data-priority="3" >Status</th>
            <th data-priority="4" >Grand Total</th>
            <th>Notes</th>
          </tr>
      </thead>
      <tfoot>
        <tr>
            <th class="" colspan="9" style="text-align:right; font-size: inherit;">Total:</th>
        </tr>
    </tfoot>
      </table>

var dt_fixedheader = $(".datatables-purchaseorders").DataTable({
  ajax: {
    url: "/accounts/purchase-orders/data",
    type: "POST",
    data: {
      startdate: starter,
      enddate: ender,
      client: urlParams.get("client"),
      createdby: urlParams.get("createdby"),
    },
  },
  columns: [
    {
      className: "dtr-control p-0 ps-1",
      defaultContent: "",
      orderable: false,
    },
    {
      data: "Inv_no",
      type: "string",
      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders/${data}">${data}</a>`;
      },
    },
    {
      data: "client",

      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders?client=${data}">${data}</a>`;
      },
    },    
    { data: "jobref" },
    { data: "date_created" },
    {
      data: "createdby",
      render: function (data, type, full, meta) {
        return `<a href="/accounts/purchase-orders?createdby=${full["userid"]}">${full["createdby"]}</a>`;
      },
    },
    {
      data: "status",
      className: "dt-center",
    },
    { 
      data: "grandtotal"
     },
    { data: "notes" },
  ],
  order: [[1, "asc"]],
  sorting: false,
  processing: false,
  displayLength: displaylen,
  fuzzySearch: {
    toggleSmart: false
  },
});

Hi

This is not important

Just upgraded to 2.1.6 on a few pages and used the download builder, which was fine. I do use three plugins (Luxon, Moment, Ellippsis) - using Script Tags :

(These work 2.1.6 does not)

Normally I just update the version of these to match DT (but 2.1.6 does not seem to exist - 404)

Is this an issue or am I doing it the wrong way around?

Thanks

Pete

We are using the rowGroups extension and the current typescript definition does not seem to be complete.

We currently override the definition with the following code:
interface ConfigRowGroup { dataSrc: string[], startRender: (rows: Api<any>, group: string, level: number) => string|HTMLElement|JQuery }

Would it be possible to update the definitions?

css files
https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css
https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.min.css
https://cdn.datatables.net/buttons/3.0.1/css/buttons.dataTables.min.css

js files:
https://code.jquery.com/jquery-3.7.1.min.js
https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
https://code.jquery.com/ui/1.13.2/jquery-ui.min.js
https://cdn.datatables.net/2.0.3/js/dataTables.min.js
https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/3.0.1/js/buttons.colVis.min.js
https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/3.0.1/js/buttons.print.min.js
https://cdn.datatables.net/plug-ins/2.0.3/pagination/input.js

DataTables pagination config:
pagingType: 'input',
layout: {
topEnd: 'paging',
bottomEnd: 'paging'
}

After upgrading v1 to v2, the input pagination is missing a input box and the appearing is completely different.

v1:

v2

Did I miss something? I do appreciate if someone can help. Thank you.

Have a select2 input field for a table which works fine for selecting several values and are stored as an INT array in Postgresql.

But...how has the JSON returned to look like so it shows correctly in the editor?

thank sin advance
richard

/**
 * Add a parameter to the current Ajax data.
 *
 * @params {object} Parameter(s) to add.
 * @returns {DataTables.Api} this
 */
$.fn.dataTable.Api.register( 'ajax.addParam()', function ( params ) {
    return this.iterator( 'table', function ( settings ) {
        /* Note settings.ajax.data here */
    $.extend(settings.ajax.data, params);
    });
});


/**
 * Delete a parameter from the current Ajax data.
 *
 * @paramKey {string} Parameter key to delete.
 * @returns {DataTables.Api} this
 */
$.fn.dataTable.Api.register( 'ajax.deleteParam()', function ( paramKey ) {
    return this.iterator( 'table', function ( settings ) {
        /* Note settings.ajax.data here */
        delete settings.ajax.data[paramKey]
    });
});

Here's an example of how it should work:

console.log(datatable.ajax.params())
// Output: {breakfast: 'Burritos!'}

datatable.ajax.deleteParam('breakfast')

console.log(datatable.ajax.params())
// Output: {}

datatable.ajax.addParam({
    lunch: 'Tacos!'
})

console.log(datatable.ajax.params())
// Output: {lunch: 'Tacos!'}

Perhaps I should be referencing something other than settings.ajax.data now?

For reference, the full discussion from 2018 is here:
https://datatables.net/forums/discussion/comment/125460/#Comment_125460

We have an application that uses the datatables editor to support complex searching and editing of address information. The user uses our search controls to select a subset of customer addresses. These are extracted into a search table based on the user's complex search criteria.

The datatables editor is being used to replace an existing tool and it is a big improvement. The user can edit certain address fields with the datatables editor, and those changes are applied immediately to the search table. Once the user has verified the changes for a given address row, we need to be able to copy those changes back from the search table to the original database addresses.

Unfortunately, it doesn't appear to be possible to put a button on a row in the datatable. Instead, it seems like the user needs to use a button to invoke an edit dialog in order to be able to use custom field controls. Is this correct? Is there a way to put a custom editing control inline into the datatable, or do they only appear on dialog boxes?

https://datatables.net/plug-ins/pagination/scrolling

I've added it but it doesn't seem to do anything with DataTables v 1.13.6.

<!-- Scripts -->
  <script src="{{ asset('js/dashboard.js') }}"></script>
  <script>
    jQuery(function() {
        //Global X-CSRF-TOKEN setup for ajax
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
        });
    });
  </script>
  <script src="{{ asset('js/settings/ckeditor-default-config.js') }}"></script>
  <script src="{{ asset('js/settings/datatables-default-config.js') }}"></script>
  <script src="{{ asset('vendor/tinymce/tinymce.js') }}"></script>
  <script src="{{ asset('vendor/tinymce/plugins/code/plugin.min.js') }}"></script>
  <script src="{{ asset('vendor/editor/dataTables.editor.min.js') }}"></script>
  <script src="{{ asset('vendor/editor/editor.bootstrap4.min.js') }}"></script>
  <script src="{{ asset('vendor/editor/editor.ckeditor5.js') }}"></script>
  <script src="{{ asset('vendor/unitegallery/js/unitegallery.min.js') }}"></script>
  <script src="{{ asset('vendor/unitegallery/themes/tiles/ug-theme-tiles.js') }}"></script>
  <script src="{{ asset('vendor/unitegallery/themes/grid/ug-theme-grid.js') }}"></script>
  <script src="{{ asset('vendor/unitegallery/themes/video/ug-theme-video.js') }}"></script>
  <script src="{{ asset('vendor/unitegallery/themes/slider/ug-theme-slider.js') }}"></script>
  <script src="{{ asset('vendor/unitegallery/themes/carousel/ug-theme-carousel.js') }}"></script>
  <script src="{{ asset('vendor/editor/editor.tinymce.js') }}"></script>

here is how we are using the field type:

                       {
                label: "Article content",
                name: "articles.fulltext",
                type: "tinymce",
            },

Any help is appropriated.

I'm running into an issue with the Select2 plugin. It works really well when i specify the options in the js editor field like so:

{
 label:             "client",
 name:          "contact_id",
 type:          "select2",
 opts:          {
    placeholder: "-- client --",
   allowClear: true,
   ajax: { 
     url: "/_data/lookup/",
     data: function(params){
       return { q: params.term, table: "client" }; 
       }, dataType: 'json', delay: 250
      }
} 
},

but when i specify the options in the php field like so:

Field::inst( 'project.contact_id', 'contact_id' )
  ->setFormatter( function ( $val, $data ) {
    return ($val != "" ? $val : NULL);
    })
  ->options( Options::inst()
  ->table( 'contact' )
  ->value( 'id' )
  ->label( 'name' )
  ->where( function ($q) { $q->where( 'is_client', '1', 'LIKE' ); } )
 ),

It used to work with previous version of the select2 field type plugin. But in the latest versions it gives an error caught TypeError: this.field is not a function. The problem is somewhere here i guess..

set: function ( conf, val ) {
 var field = this.field(conf.name);

Anyone what i'm doing wrong? or is select2 no longer compatible with options set in the php field?

Thanks!
Wouter

Jquery:
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

Ckeditor:

<script src="../all/class/Editor-PHP/js/editor.ckeditor5.js"></script>

My Editor:
...
fields: [
{
label: "DESC:",
name: "description",
type: "ckeditorBalloon"
},
...

My "window" variable from the browser console:
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
$: ƒ (e,t)
$jscomp: {scope: {…}, ASSUME_ES5: false, ASSUME_NO_NATIVE_MAP: false, ASSUME_NO_NATIVE_SET: false, findInternal: ƒ, …}
$jscomp$lookupPolyfilledValue: ƒ (d,r)
$AcroForm: {Appearance: {…}}
BalloonEditor: class rC
Button: ƒ AcroFormButton()
CKEDITOR_TRANSLATIONS: {en: {…}}
CKEDITOR_VERSION: "35.4.0"
CheckBox: ƒ AcroFormCheckBox()
...

Where could the problem be?

Best regards

Diego

<button type="button" class="btn btn-secondary btn-sm" onclick="signaturePad.clear();"><i class="fa fa-trash-o fa-lg"></i></button>

I think it would be useful to be able to use this within the editor but I am not smart enough to understand how to do it...

Thank you,
Giuseppe

// Handwriting plugin code
// based on signaturePad
// https://github.com/szimek/signature_pad

(function ($, DataTable) {
 
    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }
 
    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;

    _fieldTypes.handwriting = {

        create: function ( conf ) {
            // console.log("Handwriting - CREATE");
            var that = this;
            conf._enabled = true;
            conf._input = $(
                '<canvas id="'+Editor.safeId( conf.id )+'" class="signature-pad" width=400 height=200>'+
                '</canvas>');

            // at this location, the event is created
            conf.handwriting = new SignaturePad( conf._input[0], {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 0, 0)',
                onEnd: function() {
                    // get png image, add it to the value field and trigger for a dependent response.
                    conf._input.val( conf.handwriting.toDataURL() ).trigger( 'change', {editor: true} );
                },
            });

            return conf._input;
        },
     
        get: function ( conf ) {
            // console.log("Handwriting - GET");
            return conf._input.val();
        },
     
        set: function ( conf, val ) {
            // console.log("Handwriting - SET");
            
            // const signaturePad =  new SignaturePad( conf._input[0], {
            //     backgroundColor: 'rgba(255, 255, 255, 0)',
            //     penColor: 'rgb(0, 0, 0)',
            //     onEnd: function() {
            //         // get png image, add it to the value field and trigger for a dependent response.
            //         conf._input.val( signaturePad.toDataURL() ).trigger( 'change', {editor: true} );
            //     },
            // });
            conf.handwriting.clear();
        },
     
        enable: function ( conf ) {
            // console.log("Handwriting - Enable");
            conf._enabled = true;
            $(conf._input).removeClass( 'disabled' );
        },
     
        disable: function ( conf ) {
            // console.log("Handwriting - Disable");
            conf._enabled = false;
            $(conf._input).addClass( 'disabled' );
        }
    };
 
})(jQuery, jQuery.fn.dataTable);

The editor field type is

type: 'handwriting'

I am using "jQuery UI AutoComplete" with editor everything work fine. I would like to show custom options "label with its details". Also, add some CSS to just details part. I searched about it and I found that I can do it via "_renderItem". I used it without editor correctly, I don't know how to apply it with editor.

Here is my code:

Client Side:

{
        label: "Maunfacturer:",
        name: "trade_names.manufacturer_id",
                type: "autoComplete",
                "opts": {
                    select: function(event, ui) {
                        event.preventDefault();
                        var m = ui.item.label.split(" ");
                        $(this).val(m[0]);  
                        console.log(ui);
                    },
                    focus: function(event, ui) {
                        event.preventDefault();
                        //$(".ui-menu-item").css("background-color","#dc3545");
                        var m = ui.item.label.split(" ");
                        $(this).val(m[0]); 
                    },
             }
        }

Server Side:

 Field::inst( 'trade_names.manufacturer_id' )
        ->validator( 'Validate::notEmpty' )
        ->options( Options::inst()
            ->table( 'manufacturers' )
            ->value( 'id' )
            ->label( array('name', 'country') )
            ->render( function ( $row ) {
                return $row['name'].' ('.$row['country'].')';
            } )
        ),
    
        Field::inst( 'manufacturers.name' )

Regards

1) CKEditor 4 had the ability to display FullScreen, which I can't find in version 5.

2) with CKEditor 5 I have problems with youtube videos. It has its own function, but it creates something with the "oembed" object. "oembed" is not you can display correctly in my HTML pages (I didn't understand why). So I wanted to load it via the old iframe method. I found this:

https://stackoverflow.com/questions/55632007/ckeditor5-angular-how-to-display-video-added-via-editor

According to the above-indicated link, it would be enough to pass them the configuration:

mediaEmbed: {
        previewsInData: true
    }

I tried every way to pass this configuration, I couldn't.

I would like it to be a standard WYSIWYG configuration, how can I set it up properly and elegantly?

I did all the installation as instructed on the site: https://editor.datatables.net/plug-ins/field-type/editor.ckeditor5

The plugin actually works, but I can't seem to customize it.

Can you guys help me with this?

Thank you

I have tried both of the following masks

                 {
                    label: "Tax:",
                    name: "taxAmount",
                    type: "mask",
                    mask: "$99999999999.00"
                },
                    {
                    label: "Total:",
                    name: "totalAmount",
                    type: "mask",
                    mask: "$#,##0.00",
                    maskOptions: {
                        reverse: true
                    }
        },

Select2 doesn't focus anymore on the input when opening after updating JQuery to 3.6.

testcase here: http://live.datatables.net/covuqelu/1/edit

to reproduce:
- click new to open the editor,
- click on the priority select2 field and it opens select2
- it doesn't set focus to the actual input field (you can click it and it works though)

If you change jquery to 3.5.1 by replacing the script to
it sets focus on the input after opening the select2 popup.

Furthermore, updating to bootstrap 5.1, breaks the entire input field.

to reproduce change the bootstrap library to 5.1:

• click new to open the editor,
• click on the priority select2 field and it opens select2
• it doesn't set focus to the actual input field but you also can't click on it or type anything

Anyone else running into this?

Cheers!
W

I did not found any specific format for number formatting in datatable specific for Euler's number

I want to sum and write price column seperately to USD, EUR, TL.

Total EUR: xxx
Total USD: xxx
Total TL: xxx

my codes: https://jsfiddle.net/nesfica/63pLsgde/

When Bootstrap v5.1.2 and above is used, the even rows are striped. The zip file contain a test html file using the example from https://datatables.net/extensions/rowgroup/examples/styling/bootstrap5.html. Editing the html to use Bootstrap v5.1.1 and below will get good result.

Issue reported at https://github.com/DataTables/DataTablesSrc/issues/200 but was closed, mainly due to me not providing the sample html.

I think the regex in the plugin does not take into account thousands separator for US numbers. It does take into account the decimal point separator for US numbers. I am not enough of a regex guy to make the change, so if anyone can look at the code (https://datatables.net/plug-ins/sorting/natural) and tell me where to put the comma in the regex, that would be great! Or, if there is another sorting plugin that will work for my use case, that would be helpful, too. I have tried numString and any-number, and they break on the "not recorded" entries.

Apologies, another question!

I'd like to use the ellipsis plugin to help limit the number of columns I have to collapse using the responsive extension.

However, if the ellipsis'd column does get collapsed, I would like the full, unshortened version of the data to be visible in the that reflowed data.

Here is an example of what happens currently: http://live.datatables.net/cadecise/3/edit

Is this easily achievable?

Thanks in advance,

Dan

Case:
We load data from Wordpress via Ajax and put them there. We want to sort columns up or down by percentage. Can you help us?

            {
                label: "Langue:",
                name: "utilisateurs.langue",
                type: 'select2',
                placeholder: '',
                placeholderDisabled: false,
                placeholderValue: null
            },

Thank you

The data comes in the form of:

"createdDate": "24.09.2021 17:17:31",

Initializing
$.fn.dataTable.moment('DD.MM.YYYY h:mm:ss a');

Only then I run the table.
The problem is that the filtering does not work correctly, for example, I want the most recent date to be the first, but it gets different.
Please tell me what am I doing wrong ?

!
!