Test Case - In Development, not sure how to link a JS Fiddle when using a local web server and database.

Debugger - Says no jQuery loaded. jQuery is my first require and it is working else where on the page.

Error - Uncaught Cannot extend unknown button type: create.

Description - I have set up an environment using Typescript, Grunt, and Browserify to make a bundle. Everything has been working great until I tried using the trial version of the editor. I followed the install.js instructions to make sure the right files were moved into my node_modules. I have 11 days left to get the Full CRUD operations and need to get this working before I can get the okay on buying a license.

Code:

// jQuery and BootStrap
let $ = require( 'jquery' );
require('bootstrap');
require('popper.js')
require('bootstrap-select');

// DataTables
let dt = require( 'datatables.net-bs4' )();
let editor = require( 'datatables.net-editor-bs4' )();
require( 'datatables.net-buttons-bs4' )();
require( 'datatables.net-select-bs4' )();

// CSS Imports
import "datatables.net-bs4/css/dataTables.bootstrap4.min.css";
import "datatables.net-editor-bs4/css/editor.bootstrap4.min.css"
import "datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css";
import "datatables.net-select-bs4/css/select.bootstrap4.min.css";
import "bootstrap-select/dist/css/bootstrap-select.min.css";

$(document).ready(function () {
    // set up editor
    let _editor = new editor({
        ajax: "/testpackage/tgroup/params/0/TG",
        table: "#tgParamList",
        idSrc: "uid",
        fields: [{
                label: "Name:",
                name: "name"
            },
            {
                lable: "Value:",
                name: "value"
            }
        ]
    });

    // Activate an inline edit on click of a table cell
    $('#tgParamList').on('click', 'tbody td:not(:first-child)', function (e) {
        _editor.inline(this);
    });

    // Start table
    $('#tgParamList').DataTable({
        dom: "Bfrtip",
        ajax: "/testpackage/tgroup/params/0/TG",
        order: [
            [1, 'asc']
        ],
        columns: [{
                data: null,
                className: "checkbox-row",
                defaultContent: '<input type="checkbox"/>',
                orderable: false
            },
            {
                data: "name"
            },
            {
                data: "value"
            }
        ],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        buttons: [{
                extend: "create",
                editor: _editor
            },
            {
                extend: "edit",
                editor: _editor
            },
            {
                extend: "remove",
                editor: _editor
            }
        ]
    });
});

I am wanting to use jquery UI datepicker instead of DataTables because I just want the user to select the month/year. However, when I switch from 'datetime' to 'date' the incorrect date is displayed in the editor if there is an existing value.

I have seen posts like this: https://datatables.net/forums/discussion/47070/datatables-editor-plugin-datetime-format-issue

But I can't figure out how to fix my issue.

                    {
                        label: "Effective Date:"
                        , name: "FundOrgDeptGroup_Header.effectivedate"
                        , type: 'date'
                        , def: AsOfCookie
                        , opts: {
                            changeMonth: true,
                            changeYear: true,
                            showButtonPanel: true,
                            dateFormat: 'm/yy',
                            onClose: function (dateText, inst) {
                                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
                            }
                        }
                    },

If I change dateFormat: 'm/d/yy' it displays the correct date. changing it to 'm/yy' shows 3/2026
in my controller (this is an MVC project) I have tried various getformatters as well, but nothing worked.

I got this error when no data in the row.

$('#projectTable').DataTable({
    processing: false,
    dom: 'Bfltip',
    destroy: true,
    ajax: { 
        url: api_url,
        crossDomain : true,
        type : "POST",
        cache : false,
        dataType : "json",
        contentType: "application/json",
        dataSrc : "service",
        data: function(d) {
            return JSON.stringify({"uid": uid, "tokenid": token_id});
        }
    },
    columns: [
        { data : "name" },
        { data : "ncd_id" },
        { data : "user_label" },
        { data : "created_by" },
        { data : "modified_by" },
        { data : "type_name" },
        { data : "speed" },
        { data : "node_a" },
        { data : "node_b" },
        { data : "id" },
    ],    
});

Hi there. im using ssp and i want to export a value from a input, only get column #6 with empty data.
This is my columndef that im using

        {
                        targets: 6,
                        data: 'workorder_location_name',

                        render: function(data, type, row) {
                            return '<input type="text"' +
                                '   style=\'font-size: 13px;padding-bottom: 16px;background:transparent;color:#000000;-webkit-transition: background .2s ease-in-out, border .2s ease-in-out;-moz-transition: background .2s ease-in-out, border .2s ease-in-out;-o-transition: background .2s ease-in-out, border .2s ease-in-out;transition: background .2s ease-in-out, border .2s ease-in-out;border: 0px solid #FFFFFF;\'" ' +
                                '   class="form-control form-control-sm manageWorkordersLocationName"' +
                                '   currentLocationName="'+data+'" ' +
                                '   onClick="this.select();"'+
                                '   disabled="disabled"' +
                                '   workorderId="' + row.workorder_id + '"' +
                                '   locationId="' + row.workorder_location_id + '"' +
                                '   clientId="' + row.workorder_client_id + '"' +
                                '   value="' + data + '"'';
                        },
                    },

What's the easy way to hide particular child row's, if no data is in it in server side processing.

Output example of child rows below:
Product information
Product name : XYZ
Minium quantity : 1000 pcs
Rate :
Additional cost : Taxes extra
Tentative delivery time :

Here Rate & Tentative delivery time, has no data in it. So I don't want to display these child rows (if empty). Whereas, display if not empty.
God the only one, bless you to the right path of success hereafter.
Thanks in advance.
Abdullah.

Partial code used:-

var dt = $('#example').DataTable( {
scrollX: "100%",
"processing": true,
"serverSide": true,
"ordering": true,
"ajax": {
url:"/ids-objects.php"
},

    "columns": [
        { "data": "product" },
        {
            "class":          "details-control",
            "orderable":      false,
            "data":           null,
            "defaultContent": ""
        }
    ],
    "order": [[0, 'asc']]
} );




// Array to track the ids of the details displayed rows
var detailRows = [];

$('#example tbody').on( 'click', 'tr td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = dt.row( tr );
    var idx = $.inArray( tr.attr('id'), detailRows );

    if ( row.child.isShown() ) {
        tr.removeClass( 'details' );
        row.child.hide();

        // Remove from the 'open' array
        detailRows.splice( idx, 1 );
    }
    else {
        tr.addClass( 'details' );
        row.child( format( row.data() ) ).show();

        // Add to the 'open' array
        if ( idx === -1 ) {
            detailRows.push( tr.attr('id') );
        }
    }
} );

// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
    $.each( detailRows, function ( i, id ) {
        $('#'+id+' td.details-control').trigger( 'click' );
    } );

} ); 

}

function format ( d ) {
// d is the original data object for the row
return '

';

I am using ColReorder with my Datatable. The first time I click on a column header to move it, all of the text in the table gets highlighted for some reason. (Moving the column still works.) Oddly enough, this only happens the very first time I do this, after page load. Afterwards, it does not highlight any text.

This isn't an issue with functionality, just appearance (it looks really bad to the end user).
Only that I noticed when removing the ordering **false configuration (or "orderable**" in columns) this issue is solved. But still, I want to keep the ordering false option !

Thanks in advance for any help!

My datatable code is:

$('#example').dataTable( {
"ordering": false,
"colReorder": true
} );

Hi,
I'm a bit new using Editor and I can't find a way to solve my problem.
I'm using Node Js with Express JS and EJS to develop an app that instead of using a database, uses objects that are passed to the EJS templates. I want to know if it's possible to use the Editor inside one table and then whenever the user edits any row, the object related with this row updates its values automatically and the if I need to use the object for any other operation, the object values are always updated in both, client and server side.

Thanks.

I am using the raw sql query below to populate some columns in the datatble which is already created using Editor data-tables. I am not sure if I am doing it correctly. I believe that the** if ( ! isset( $_POST['action'] ) ) {** is not working as it should work.

How should the JSON response look like?

In my case I would like JSON to contain all the data 1) From RAW sql to populate few columns and 2) From Editor to populate renaming columns (else condition).

p.s i tried to remove the if condition so i can read all the data in one JSON and then handle them differently on client side but it is showing me** Error: Parse error**

**// if ( ! isset( $_POST['action'] ) ) {
   $rawquery = "SELECT start  AS time 
                FROM contract_bal";
   $data = $db->sql( $rawquery )->fetchAll();
   echo json_encode( array(
      'data' => $data
   ) );
 
// }else{
......editor stuff
}**    

and on the client side i included this:

**columns[
......
 
                     { data: "time" }
.....
]**

Hi

I am trying to get Editor to save selected data by user to 3 tables: GlobalSubsPacks, GlobalSubsPacksRelations, GlobalPacksDataParam

Here's my Model, how they relate and their respective fields:

GlobalSubsPacks:
ID

GlobalSubsPacksRelations (one GlobalSubsPacks to many GlobalSubsPacksRelations):
ID
SubPackType
ParamType
SubPackID stores GlobalSubsPacks.ID
ParamID stores GlobalPacksDataParam.ID

GlobalPacksDataParam (one GlobalPacksDataParam to one GlobalSubsPacks):
ID
MaximumUsageAllowed (decimal type)

GlobalSubsPacksRelations is a link table that holds a one to many relationship with other tables in my code elsewhere (GlobalSubsPacksRelations.ParamType != 1 if you like). However in the code below where GlobalSubsPacksRelations.ParamType = 1 the relationship is one to one with GlobalPacksDataParam. Can I avoid using an MJoin here since for GlobalPacksDataParam relation is 1-1. I tried using code #1 below but get error 'Unable to cast object of type 'System.Decimal' to type 'System.Collections.Generic.Dictionary`2[System.String,System.Object]'.' which is to be expected since an object is returned rather than a variable. However I get no data back from the server if I use code #2 below.

    HttpRequest formData = HttpContext.Current.Request;

    using (Database db = new Database(SetGetDbType2, SetGetDbConnection))
    {
        editor = new Editor(db, "GlobalSubsPacks", "GlobalSubsPacks.id").Model<SubsPacksDBModel.GlobalSubsPacks>("GlobalSubsPacks");
        editor.Field(new Field("GlobalSubsPacks.id")
            .Set(false)
        );

        Server code #1:
        editor.MJoin(new MJoin("GlobalPacksDataParam")
            .Model<SubsPacksDBModel.GlobalPacksDataParam>()
            .Name("GlobalPacksDataParam")
            .Link("GlobalSubsPacks.id", "GlobalSubsPacksRelations.SubPackID")
            .Link("GlobalPacksDataParam.id", "GlobalSubsPacksRelations.ParamID")
            .Where(q =>
                q.Where("GlobalSubsPacksRelations.ParamType", 1, "=")
            )
            .Order("GlobalPacksDataParam.id ASC")
            .Field(new Field("GlobalPacksDataParam.MaximumUsageAllowed")
                .GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? 0 : val)
                .Validator(Validation.Numeric())
                .SetFormatter((val, data) => CommonUtilities.IsNumeric(val) == false ? 0 : val)
            )
        );

        Server code #2:
        editor.Field(new Field("GlobalPacksDataParam.MaximumUsageAllowed")
            .GetFormatter((val, data) => CommonUtilities.IsNullOrEmpty(val) == true ? 0 : val)
            .Validator(Validation.Numeric())
            .SetFormatter((val, data) => CommonUtilities.IsNumeric(val) == false ? 0 : val)
        );
        editor.LeftJoin("GlobalSubsPacksRelations", "GlobalSubsPacksRelations.SubPackID", "=", "GlobalSubsPacks.id");
        editor.LeftJoin("GlobalPacksDataParam", "GlobalSubsPacksRelations.ParamID", "=", "GlobalPacksDataParam.id");            
   }

   editor.TryCatch(false);
   editor.Debug(true);
   editor.Process(formData);   

Any help would be welcome.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hello, does anyone have a good example of using an editor with multiple tables (3+, when there is a main table and several side ones that are connected by one field, when there may be a lot of duplicate information, I mean one to many relationship, etc.). I saw an example on the site, but it doesn't quite fit. Thanks for your attention.

A better approach of taking part in stands out as the second choice. Constant hypothesis over players’ futures will come to the fore. Bonus bets would lose greater than they'd win normally, and little to no revenue can be attained from this technique.

Here the best crew from every state will get chosen to play within the nationwide video games. For the in soccer running betting on win/draw win one should always attempt to back the underdogs or draw because the returns are better on this.

If you happen to consider yourself to be one thing of a tennis knowledgeable and are interested to find how one can convert your information into dividends within the tennis betting markets, then you need look no further than the following fundamental information to tennis betting. Have you ever discovered the right sinker in your bubble tea? <a href="http://www.paisley.org.uk/2020/07/adaptation-of-interactive-bets-for-mobile-devices/">http://www.paisley.org.uk/2020/07/adaptation-of-interactive-bets-for-mobile-devices/</a
If you wish to bowl and area first then attempt to restrict the run -score of the batting workforce. With the rise of cooking video gaming and sensible cellular video games for cooking that do the job as self guided cooking food classes, the cooking video games for women are acquiring common.

However, happening a trip or doing an journey sport each different day is just not possible as a result of economical and time constraints. Senior investigating officer Detective Sergeant Jason Booth, from Kent Police, said: 'The brothers believed that robbing a business was the simplest and quickest approach to get their hands on some cash. Explicitly, men and women observe the heater on account of ends in whatever complication as effectively because the scenario breaks down.
https://capbiz.su/index.php?/topic/104800-post87-start-a-web-based-gaming-center-with-golf-games-online-gaming/
Call me lazy however why make issues hard for your self betting on arduous to select non favorites when you may very, very easily profit from the favorites! Within the police record of the conversation, reproduced by Marca, the person often called Esteban, after telling Aranda he would speak to Molina, stories again: '2 million Euros (£1.8m) have been given to Villarreal to seven players'.

Dear community,
i benefit so much from this forum. Time to give something back.

With the default settings in the SQL helper functions (ssp.class.php) the search experience is pretty poor compared
with the great smart search on client side processing.

Just want to share some hints:
* create a fulltext index in your SQL table. Edit the SQL executions and add boolean mode in ssp.class.php. Tried to explain it here roughly.
* modificate the search string in ssp.class.php per Regex

            $str = $request['search']['value'];
            //remove leading boolean operators and the trailing last character, if they are just typed in and "alone" with any trailing any other characters
            //this is primary for avoiding SQL/json fault messages
            //e.g. "+search1 +" --> "+search" 
            //e.g. "-search1 + > ( +search2 <" --> "-search1 +search2" 
            //https://stackoverflow.com/questions/7660545/delimiter-must-not-be-alphanumeric-or-backslash-and-preg-match#comment104798716_7660545
            //https://www.phpliveregex.com/p/vzy#tab-preg-replace
            $str = preg_replace('/[\+\-\>\<\(\)\~][^\w]|\+$/', '', $str);
            //$str2 = preg_replace('/\b.{1,3}\b\s?/', '', $str);

            //add a wildcard to the end of each word with a length of more than 3
            //e.g. "it is more than a search" -> "it is more* than* a search*"
            //https://stackoverflow.com/a/40614597
            //https://www.phpliveregex.com/p/vzz#tab-preg-replace
            $str = preg_replace('/\b\w{3,}\b/', '$0*', $str);

            //add a leading '+' to  all search terms without a leading boolean
            //e.g. "+search1 -search2 search3 ~search4" -> "+search1 -search2 +search3 ~search4"
            //remark; this will convert the search into a boolean AND - a boolean OR will not anymore
            //https://www.phpliveregex.com/p/vzF
            $str = preg_replace('/([^\+\-\>\<\(\)\~])(\b\w+\b)/', ' +$2 ', $str);

            $binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
            $globalSearch[] = "match(myFullTextColumn) against (".$binding." in boolean mode)"; 

With this adaptation you will almost get the same (smart) search as like with client side processing.
The only thing i was not able to was figuring out how to operate with a leading wildcard *mysearch.
I am afraid, this is not been supported by the fulltext search in SQL.

Regards..

I have modified my code to have a function called - dTable(myType) that I pass a parameter to. The parameter is for the type of table I wish to display, either with phone calls or form submissions.

Everything works as it should except the daterangepicker. When I change dates the page goes blank. I guess because my function is expecting a parameter and not getting one.

I see in the code daterangepicker executes cb (which as dTable(myType)) but I don't see where I can add my parameters.

https://1stautorepair.com/leads/

$(document).ready(function () {

var lType = $("#lead_type option:selected").val();


$(function() {

    var start = moment().subtract(59, 'days');
    var end = moment();
    var myType;

    function cb(start, end, myType) {
        
        $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        var leadURL = "/includes/leadTable.asp?s=" + start.format('YYYY-MM-D') + "&e=" + end.format('YYYY-MM-D') + "&type=" + myType;
        
        $("#leadTable").fadeOut(1000);
        
        $('#leadTable').load(leadURL, function () {
            dTable(myType);
            mBind(); 
            bindME(); 
            $( "#callsTable_filter input" ).focusout(function(){bindME();});
        }).fadeIn("slow")
    }

    $('#leadTable').on( 'length.dt', function ( e, settings, len ) {
    setTimeout(bindME,2000);
    });

    $('#leadTable').on( 'page.dt', function () {
    setTimeout(bindME,1000);}
    );

    $('#leadTable').on( 'column-visibility.dt', function ( e, settings, column, state ) {
        bindME();
    });    


    $('#dateRange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end, lType);

    $('select#lead_type').on('change', function () {        
        cb(start, end, $(this).children("option:selected").val());
    });


});
});






function bindME(){

            document.querySelectorAll('.leadAMT').forEach(
                function(obj){
                    new Cleave(obj,{
                    numeral: true,
                    numeralThousandGroupStyle: 'thousand'
                });
            });

            $(".leadAMT").click(function(){            
                if($(this).val() == 0){
                    $(this).val('');
                }
            });
            $(".leadAMT").blur(function(){
               if($(this).val() == ''){
                    $(this).val('0');
                }
            });

            $(".leadSubmit").click(function(){
                var leadID = $(this).attr("data-id");

                $.post("https://www.1stautorepair.com/includes/lead-estimate-update.asp",
                {
                ro: $("#ro"+$(this).attr("data-id")).val(),
                invoice: $("#invoice"+$(this).attr("data-id")).val(),
                amount: $("#amt"+$(this).attr("data-id")).val(),                
                leadID: $(this).attr("data-id")
                },
                function(data,status){
                console.log("Data: " + data + "\nStatus: " + status)
                $("#ro"+leadID).css('border', '2px solid green');
                $("#amt"+leadID).css('border', '2px solid green');
                $("#invoice"+leadID).css('border', '2px solid green');

                });
            });

}

Hi! I'm using Datatables with server-side processing from a remote MySQL db.
I need to add a column with checkboxes to select rows. I did it adding a new column "sel" to the table structure...

........... <thead> <tr> <th data-field="id" align=center><center>ID</th> <th data-field="sel" align=center><center></th> <th data-field="code" align=center><center>Código</th> <th data-field="name">Nombre</th> ..........

...defining the columns and select plugin...

`
...........
columnDefs:[{
targets: 1,
orderable:false,
className: 'select-checkbox'
}],
select: {
style: 'multi',
selector: 'td:first-child'
}
............

`
...and in the gettabledata.php file, the $columns defs is like this:

........... $columns = array( array( 'db' => 'ID', 'dt' => 0 ), array( 'db' => 'ID','dt' => 1 ), array( 'db' => 'CODE', 'dt' => 2 ), array( 'db' => 'NAME', 'dt' => 3 ) ............

The problem is that, the second column ('sel') is showing both the ID value and the checkbox in the cell:

Is this the right method to enable checkboxes with server-side processing?

Hello,

I use PHP AJAX method for server side.
The preEdit and postEdit functions show the same values, both show the value AFTER editing.
This code change the status from 4 to 6. It works well, the database change the value correctly.

AJAX PHP:

function update_pr_pre ( $db, $action, $id, $values ) {
    error_log(print_r($values,true)); //SHOWS 6, but it should be 4
}

function update_pr_post ( $db, $action, $id, $values, $row ) {
    error_log(print_r($values,true)); //SHOWS 6, it's OK
}
...
$editor = Editor::inst( $db, 'table', 'id' )
->on( 'preEdit', function ( $editor, $id, $values )
{
    update_pr_pre( $editor->db(), 'preEdit', $id, $values );
} )
->on( 'postEdit', function ( $editor, $id, $values, $row )
{
    update_pr_post( $editor->db(), 'postEdit', $id, $values, $row );
} )

JS:

new $.fn.dataTable.Buttons( table1,
{
    name: 'group11',
    buttons:
    [
        {
            extend: "selectedSingle",
            editor: editor,
            text: "Allow",
            action: function ( e, dt, node, config )
            {
                tabledata = table.row( { selected: true } ).data();
                if ( tabledata.table.status == 4 )
                {
                    var todayDate = new Date().toISOString().slice(0,10);

                    editor
                    .edit( table.row( { selected: true } ).index(), false )
                    .set( 'table.date', todayDate )
                    .set( 'table.status', 6 )
                    .submit();
                }
            }
        },
    ] 
} );

Thank you and best regards:
Endre, Szak

Hi!

I'm using DataTables with server-side processing from a remote MySQL database. There is a ID column I need to get/locate actual record IDs, but don't want end-users to search by that column.

For example, if I write '123' in the datatables search input, it filters and shows records with that ID (or even IDs with '1', '12', and '123'), but IDs are internal values end-users don't need to know or see.

I tried to assign the 'searchable: false' to that column but it seems it's not working at all with server-side processing when retrieving data from a mysql database. All I can do is disable searching in the entire table.

I also tried to set searching:false to the datatable and then searchable:true just to some columns, with no effect.

So, is it possible to disable searching to specific columns in server-side processing a remote mysql table?

Thanks!

Hi guys,
I'm having difficulty displaying response data in the DataTable
Here are the columns of the table

columns: [
    {
      data: 'name', title: 'Name'
    },
    {
      data: 'description', title: 'Description', render: function (data, type, full, meta) {
        if (data === '') {
          return '-';
        } else {
          return data;
      }
    }},
    {
      title: 'Actions',
      render: function (data, type, full, meta) {
        console.log(full);
        return `
        <button class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Edit">
        <i class="la la-edit"></i>
        </button>`;
  }}
     ]

I logged the full data of each row in the console to ensure it is valid
and here is a screenshot from the console

The Datatable body shows "No matching records found"
in the Datatable info I have "Showing 0 to 0 of 0 entries (filtered from 12 total entries)"

Thank you in advance

I am working on a website that contains many tables and DataTables with DOM data source is used for all of them. Everything was fine until I used DataTables for tables with 2000 records or above. The DataTables is taking around 3 or 4 seconds for rendering, I don't mean the query execution time, everything is fine from the server-side, the table is displayed successfully and after 4 seconds the search bar and the other DataTables features appear. After searching I switch over to using Javascript source loading of data with deferred rendering option which fastens the rendering.

So my first question is:
- is switching over to use the Javascript source with deferred rendering instead of DOM is the proper solution for the slow rendering or there is a solution that could be done with the DOM Datasource?

If the solution is to use Javascript source with deferred rendering than I am facing some issues using this approach, which needed to be clarified

- is there is a way to use javascript objects as data source without specifying the columns using the columns option

- in my table there is an additional column for the details link is there is a way to display this column with the Javascript source. I found a way in this link https://datatables.net/examples/ajax/null_data_source.html but it seems it is working only with Ajax data source, it did not work in my case

I installed trial version for editor but faced with problem with implementation
this is directory wth files which was extracted from zip 'editor'
Then I sue webpack with symfony framework and in my 'assets/js/app.js' I did

// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.scss';
import * as dt_bs4 from 'datatables.net-bs4'

import * as fh_bs from 'datatables.net-fixedheader-bs4';
import * as r_bs from 'datatables.net-responsive-bs4';

// import * as editor from 'datatables.net-editor-bs4';
import * as editor4 from '../../editor/js/editor.bootstrap4';

import * as buttons from 'datatables.net-buttons-bs4';
import * as select from 'datatables.net-select-bs4';




require('@fortawesome/fontawesome-free/css/all.min.css');
require('datatables.net-dt/css/jquery.dataTables.min.css');
require('datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css');
require('datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css');
require('datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css');
require('datatables.net-select-bs4/css/select.bootstrap4.min.css');

// require('datatables.net-editor-bs4/css/editor.bootstrap4.min.css');
require('../../editor/css/editor.bootstrap4.min.css');

require('@fortawesome/fontawesome-free/js/all.js');

const $  = require( 'jquery' );
global.$ = global.jQuery = $;

then im my js file

document.addEventListener("DOMContentLoaded", function () {
    console.log( "hover!" );

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

    const app_rest_hovermenumanagment_edithovermenu = window.Routing
        .generate('app_rest_hovermenumanagment_edithovermenu');
    const app_rest_hovermenumanagment_listhovermenu = window.Routing
        .generate('app_rest_hovermenumanagment_listhovermenu');


    editor = new $.fn.dataTable.Editor( {
        ajax: app_rest_hovermenumanagment_edithovermenu,
        table: "#example",
        fields: [ {
            label: "First name:",
            name: "first_name"
        }, {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "Position:",
            name: "position"
        }, {
            label: "Office:",
            name: "office"
        }, {
            label: "Extension:",
            name: "extn"
        }, {
            label: "Start date:",
            name: "start_date",
            type: "datetime"
        }, {
            label: "Salary:",
            name: "salary"
        }
        ]
    } );

    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: app_rest_hovermenumanagment_listhovermenu,
        columns: [
            { data: null, render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.first_name+' '+data.last_name;
                } },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
});

and in console I facd with that

editor.bootstrap4.js:42 Uncaught TypeError: Cannot read property 'defaults' of undefined
    at editor.bootstrap4.js:42
    at Object.<anonymous> (editor.bootstrap4.js:9)
    at editor.bootstrap4.js:8
    at Object../editor/js/editor.bootstrap4.js (editor.bootstrap4.js:5)
    at __webpack_require__ (bootstrap:79)
    at Module.<anonymous> (app.js:24)
    at Module../assets/js/app.js (app.js:75)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
(anonymous) @ editor.bootstrap4.js:42
(anonymous) @ editor.bootstrap4.js:9
(anonymous) @ editor.bootstrap4.js:8
./editor/js/editor.bootstrap4.js @ editor.bootstrap4.js:5
__webpack_require__ @ bootstrap:79
(anonymous) @ app.js:24
./assets/js/app.js @ app.js:75
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ app.js:1
categories:96 Uncaught ReferenceError: $ is not defined
    at getJSonObject (categories:96)
    at categories:99
getJSonObject @ categories:96
(anonymous) @ categories:99
hover_menu.js:2 hover!
hover_menu.js:12 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
    at HTMLDocument.<anonymous> (hover_menu.js:12)

how to correct use edit opportunity ?

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I've added a button to collapse the .searchPanes div without collapsing the whole SearchPanes container (which is why I'm avoiding the default searchPanes button). However, I would like to add the functionality of the active filter count in the button text (e.g. "Advanced Filters (2 Active)" ). Is there a way to use the searchPane button language options on my custom button, or do I need a special function update the button text? I'm not sure how to approach this.

I would also like to remove the default title div from SearchPanes. I'm currently hiding it in css, but if there's a way to eliminate it entirely in the searchPane options, that would be preferable.

http://live.datatables.net/jigixuqe/1/edit

Thanks!