Example
Using modified code from this https://editor.datatables.net/examples/advanced/upload-many.html example:

Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'users.id' ),
        Field::inst( 'users.first_name' ),
        Field::inst( 'users.last_name' ),
    )
    ->join(
        Mjoin::inst( 'files' )
            ->link( 'users.id', 'users_files.user_id' )
            ->link( 'files.id', 'users_files.file_id' )
            ->fields(
                Field::inst( 'id' )
                    ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
                        ->db( 'files', 'id', array(
                            'filename'    => Upload::DB_FILE_NAME,
                            'filesize'    => Upload::DB_FILE_SIZE,
                            'web_path'    => Upload::DB_WEB_PATH,
                            'system_path' => Upload::DB_SYSTEM_PATH
                        ) )
                        ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                        ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
                    )
            )
    )
    ->where( 'id', $_GET['userId'] )
    ->process( $_POST )
    ->json();

If there is no user with id requested in $_GET['userId'], you get zero records in data array, but all existing server files in files array.
I guess this is not a bug, but it's how Mjoin works. Any ideas how to filter correctly?
This might be huge security concern.

@datatables.net:registry=https://npm.datatables.net/
//npm.datatables.net/:_authToken=${DATATABLES_NPM_TOKEN}

I stored the authToken in my .env file. I want to install with bootstrap 5. I ran this command,

npm install --save @datatables.net/editor-bs5

I received this error,
npm ERR! code E502
npm ERR! 502 Bad Gateway - GET https://npm.datatables.net/@datatables.net%2feditor-bs5

I also tried

npm install --save @datatables.net/editor-dt

and got this error
npm ERR! code E502
npm ERR! 502 Bad Gateway - GET https://npm.datatables.net/@datatables.net%2feditor-dt

Any ideas as to what the issue is?

This example does integrate with Editor as it uses the PHP controller file that the Editor Generator produces to retrieve data. It also works with a Select field getting its data from another table. I have also tried it with "Column Control", colReorder and colvis and all seem to work fine. You can change the user_id variable in user_data.php so that different users can just see their own states.

To get this to work, I have added another method to the php/lib/Editor.php file. (in my case I added it after the json() method).

To start, log into the DataTables website and generate a basic site from the Editor page (https://editor.datatables.net/ ) as the files below rely on the libraries / structure of what the generator produces. You will then need to save the files detailed below in the relevant directories. Make sure you use stateRestore version 1.4.3 or later.

Initially download the package from the generator and get it working and then use / copy the files below.

SQL Scripts
data_table_script.sql. This script creates the main "data" table
state_table_script.sql. Creates the table to store the state information.
10data.sql: Optional file to load 10 example rows of data into the "data" table.

Editor.add.php
Method to be included in the php/lib/Editor.php file.

Save the following in the root directory
* user_data.php
* state_info.php

Save the following in the js directory
* table.user_data.js
* table.state_info.js

Save the following in the PHP directory
* table.state_info.php
* table.user_data.php
* table.user_and_state_data
* stateSave.php
* stateLoad.php

Edit php/lib/Editor.php and add Editor.add.php

Edit table.user_and_state_data and check that the path for the $stateLoad variable is correct.

Note that I opted for separate controller files for datatables and editor in table.user_data.js so that the statesave info is not sent back to the server after editing.

-- Data Table (filename: data_table_script.sql )
DROP TABLE IF EXISTS data;
CREATE TABLE `data` (
  `id` int(10) NOT NULL,
  `first_name` varchar(25) DEFAULT NULL,
  `last_name` varchar(25) DEFAULT NULL,
  `zip_post_code` varchar(25) DEFAULT NULL,
  `country` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

ALTER TABLE `data`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `data`
  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;

  -- State Table (filename: state_table_script.sql )

DROP TABLE IF EXISTS states;
CREATE TABLE `states` (
  `id` int(10) NOT NULL,
  `state_name` varchar(10) NOT NULL,
  `state_info` text DEFAULT NULL,
  `user_id` varchar(5) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

ALTER TABLE `states` ADD PRIMARY KEY (`id`);
ALTER TABLE `states` MODIFY `id` int(10) NOT NULL AUTO_INCREMENT;
ALTER TABLE `states` ADD UNIQUE `unique_index`(`state_name`, `user_id`);

-- Data for load (filename: 10data.sql)
INSERT INTO data (first_name, last_name,zip_post_code,Country)
VALUES
("Armand","Warren","56045","Taiwan"),
("Xenos","Salas","71090","Liberia"),
("Virginia","Whitaker","62723","Nicaragua"),
("Kato","Patrick","97662","Palau"),
("Penelope","Hensley","76634","Greenland"),
("Georgia","Erickson","81358","Bolivia"),
("Tanisha","Humphrey","93371","Kenya"),
("Claire","Espinoza","I8S 2S8","Panama"),
("Raya","Tucker","O8D 8W7","Botswana"),
("Otto","Briggs","57590","Anguilla")

    /** File: Editor.add to be added to php/lib/Editor.php
     * jsonAddState, echo out json and state information.
     */
        public function jsonAddState($statescript = null)
    {
        include($statescript);
        $json = $this->_out;
        if ($statedata_array === []) {
            $json = json_encode($json);
            echo $json;
        } else {

            $json["stateRestore"] =  $statedata_array;
            $json = json_encode($json);
            echo $json;
        }
        return $this;
    }

<?php
    // filename user_data.php
    session_start();
    $_SESSION['user_id'] = 2;
    ?>

<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>User Data</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/table.user_data.js"></script>

    <style>
        div.desktopContainer {
            width: auto;
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>

<body class="dataTables">
    <div class="desktopContainer">
        <h2>User Data</h2>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="user_data" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>ZIP / Post code</th>
                    <th>Country</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

</html>

<?php
    // Filename state_info.php
    ?>
<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>State Information</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.4/b-3.2.5/b-colvis-3.2.5/cr-2.1.2/cc-1.1.1/date-1.6.1/sl-3.1.3/sr-1.4.3/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/table.state_info.js"></script>

    <style>
        div.desktopContainer {
            width: auto;
            margin-left: 90px;
            margin-right: 90px;
        }
    </style>

</head>

<body class="dataTables">
    <div class="desktopContainer">
        <h2>State Information</h2>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="state_info" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>User Id</th>
                    <th>State Name</th>
                    <th>State Information</th>
                </tr>
            </thead>
        </table>
    </div>
</body>

</html>

Been seeing this weird gif when I export using csv or excel ... looks like broken arrow? Will try and post test case, but in mean time just thought I flow to see if icon is as intended. The export works fine, just the icon/gif that I'm questioning.

Using css:

https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.3.2/b-3.2.4/b-colvis-3.2.4/b-html5-3.2.4/b-print-3.2.4/cr-2.1.1/fc-5.0.4/fh-4.0.3/rr-1.5.0/sl-3.0.1/datatables.min.css

Using js:

https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.3.2/b-3.2.4/b-colvis-3.2.4/b-html5-3.2.4/b-print-3.2.4/cr-2.1.1/fc-5.0.4/fh-4.0.3/rr-1.5.0/sl-3.0.1/datatables.min.js

Thanks, as always, in advance.

c

    // Get the row data.
    var td = $( this ).closest( 'td' );
    var rowdata = oTable.row( td ).data();

    var details = '"' + rowdata.Songs.title_for_display + '"' + " (Id: " +rowdata.Songs.song_id + ")";

    oEditor.remove($(this).closest('tr'), {
        title: 'Delete record',
        message: "Are you sure you want to remove this record?" + "\r\n" + details,
        buttons: 'Delete'
        });
    });    

The message and details are shown, but the newline is ignored. I have used this newline elsewhere in js with no problem. Is there anything different about "message" in this example?

After digging into the code, I realized that this is because datatables renders cells outside the context of Vuetify and the use of vNode. My question is whether it is possible to support third-party components not through render as html but through virtual dom.

services.Configure<FormOptions>(options =>
{
    options.ValueCountLimit = 4096; }) 

).
Resolving this I've create this script that create resubmit of chuncked values (multiset not work for me). This action for button that confirm modify in editor modal.

name: "editYes",
action: function (e, json, data, action) {
    if (processing) return;
    const chunkSize = Math.floor(maxFormSizeLimit / editor.fields().length);
    var chunkCounter = 0;
    var toUpdateValuesChunk = toUpdateValues.slice(chunkCounter, chunkCounter + chunkSize);
    var toUpdateRowIdsChunk = toUpdateRowIds.slice(chunkCounter, chunkCounter + chunkSize);
    editor.on('preClose', function (e) {
        return !processing;
    });
    editor.on('preSubmit', function (e, data, action) {
 //field.multiSet(toUpdateRowIds[j], value) not work if  table page not contain element
        delete data.data.keyless;
        processing = processing;
        chunkCounter = chunkCounter + chunkSize;
         
        for (var i = 0; i < toUpdateValuesChunk.length; i++) {
            data.data[toUpdateRowIdsChunk[i]] = toUpdateValuesChunk[i];
        }
    });
    editor.on("postSubmit", function (e, json, data, action, xhr) {
        if (chunkCounter >= toUpdateValues.length) {
            editor.off('postSubmit').off('preSubmit').off('preClose');
            processing = false;
            if (toCreate.length > 0) {
                createRecords(editorCreate);
            }
            else {

                editor.close()
                resetTable();
            }
        }
        else {
            toUpdateValuesChunk = toUpdateValues.slice(chunkCounter, chunkCounter + chunkSize);
            toUpdateRowIdsChunk = toUpdateRowIds.slice(chunkCounter, chunkCounter + chunkSize);
            //@ts-ignore
            editor.s.processing = false;
            editor.submit(null, null, null, false);
        }
    })
    editor.submit(null, null, null, false);
}

I might to do same thing for bulk delete and create.

With tables of many columns, the visible() function can become terribly slow, even when redrawCalc option is set to false.

Ref: columns().visible().

This code line hides all columns with header class = 'empty': table.columns('.empty').visible(false, false);

In the simple example I built, which contains 20 rows, if the table has 60 columns ... no problem. You can toggle the empty class columns in a fraction of a second.

Here is link to 60 Column Example. Click "Toggle Position Columns" button to demo.

But when the same table has 600 columns, the time to complete the toggle is 50 seconds!

Here is link to 600 Column Example.

It would actually be faster to rebuild the table from scratch than use the dt visible() function.

Is there better way to implement this function? My tables can reach over 1000 columns. At that point, attempting any ColVis is hopeless.

Thanks in advance, as always.

c

At present let me have a dilemma is that some development environments do not allow access to the Internet, resulting in a very much time-consuming in datatables. I wish there was a way to have offline documentation and case code for developers to try.

I look forward to your reply, thanks!

Our application is misbehaving for all users in one of our clients' user pools. The symptom is that content that is supposed to be added and removed from the DOM is not being added at all. I saw a number of errors in the JavaScript console, the first of which was "Editor requires DataTables 1.10.20 or newer". V1.10.25 is newer than that, so I assume that the Editor script is not finding what supposed to be loaded from the CDN.

We have no other reports of this problem from any of our other clients or their users.

Have there been reports of the CDN being blocked/black listed by corporate networks?

A Coworker suggested that maybe corporate networks have mechanisms to block outdated or flagged CDN content. Have any of the DataTables scripts been identified as security risks that would flag them as quarantined?

Thanks!

I was able to do this readily with JQuery in the pre-React days but am trying to avoid mixing React and JQuery. I've looked in many places but have found nothing timely, or even relevant. Any advice gratefully accepted!

<DataTable id="resultSetTable" className="display" onSelect={selectEvent}
                                    options={{
                                        responsive: true,
                                        select: true,

                                        ajax: {
                                            url: 'blah blah',

                                            headers: {
                                                'Content-Type': 'application/json',
                                            }
                                        },

                                        searching: true,
                                        paging: true,
                                        order: [[1, 'desc']],
                                        dom: 'lfrtip', // use B for buttons
                                        pageLength: 5,
                                        lengthMenu: [[5, 10, 20, -1], [5, 10, 20]],
                                        (plenty of column definitions),
                                        fixedColumns: false
                                    }}>

and the simple logging function:

 let selectEvent = (e) => {
        console.log('Select action', e);
       
      };

        $('input', this.footer()).on('keyup change', function () {
              if (that.searchTimer) {
                clearTimeout(that.searchTimer);
              }
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });```

```php

Field::inst('OL.comment', 'comment')
->getFormatter(function ($val, $data, $field) {
$details = [
['key' => 'U1.username', 'label' => 'Operator'],
['key' => 'OM.Mode', 'label' => 'Mode'],
['key' => 'EB.EB', 'label' => 'EB Type'],
['key' => 'OL.speed', 'label' => 'Speed'],
['key' => 'Y2.yesNo', 'label' => 'Flats'],
['key' => 'OL.oscRating', 'label' => 'Rating'],
['key' => 'OL.vatc', 'label' => 'VATC Reboot'],
['key' => 'Y3.yesNo', 'label' => 'Braking/Propulsion'],
['key' => 'Y1.yesNo', 'label' => 'Out of Service'],
['key' => 'OL.dos', 'label' => 'Door Operations Switch'],
['key' => 'Y4.yesNo', 'label' => 'Are you Properly Berthed?'],
['key' => 'OL.qfmID', 'label' => 'QFM #'],
['key' => 'U4.username', 'label' => 'Other Operators']
];
$comment = $val; // Starting with the original comment value
$commentReturn = '';
foreach ($details as $detail) {
if (isset ($data[$detail['key']]) && !empty ($data[$detail['key']])) {
$value = $data[$detail['key']];
$label = $detail['label'];
if ($label == "Door Operations Switch") {
if ($value == 1) {
$value = "Manual";
} else {
$value = "Auto";
}
}
$commentReturn .= '<br>

[' . $label . ': ' . $value . ']
';
}
}

2 Tables with the same structure and similar content where Table A can have different entires of Table B ...

Best regards,
David

And for those scratching your head, here is a quick note on the subject:

top:  Will spread your options across the top of the table, using the pageLength:, info: and search: 
(the old style of the table, atleast from my options) it looks weird.
topStart:  Will put your options nicely together.
topEnd:  Will put everthing to the right side (pretty much opposite of topStart).
div:  Now this is where the fun really is.  Using this, give it an id and append you extra buttons to it.  Sooo nice.

The piece that got me for a few minutes was how to include the menu options with info and search. The examples are good, but this one might help the lost:

I put this at the begining outside the DataTable initialize as per the example:
DataTable.defaults.layout =
{
   topStart: null,
   topEnd: null,
   bottomStart: null,
   bottomEnd: null
};


$(#example').DataTable(
{
   layout: {
      topStart:
      {
         pageLength: 
         { 
            menu: [[10, 25, 50, 500, 1000, -1], [10, 25, 50, 500, 1000, "All"]],   
            The only thing I am not sure is if you can set the default selection in here.  
            I did not see it in the pageLength documents, but the pageLength option still worked.
         },
         info: {},
         search : {},
         div: 
            {
               id: 'buttonBox,
            },                      
         },             
         bottom: ['info', 'paging'],
   },
});

And one last thing to remember, the top and bottom, when you place numbers after them, will count down, ie, top3 is 1st, top2 is next, etc..:

top3: Will be first
top2: Next
top1: Next
top: Bottom

top2Start: Can use the number between as well.

But anyway. Thanks for this lovely feature!!

I continue trying to adapt the multiple selection example: https://editor.datatables.net/examples/datatables/mJoin.html

All works fine, I can see and modify data amb multiselect values.

The problem is with the filter. When a put a character in the filter, it returns me an error

DataTables warning: table id=pacients_diagnostics_mostra - Unknown field: pacients_diagnostics_view (index 3)

Table pacients_diagnostics_view has the multi selected values.

Datatables column definition is:

        columns: [
            { data: "id"  },
            { data: "npat" , visible: false },
            { data: "data_diagnostic" },
            { data: 'pacients_diagnostics_view', render: '[, ].microorganisme_mecanisme' }
        ],

Editor is:

    editormostra = new $.fn.dataTable.Editor( {
        "ajax": "ajax/pacientsdiagnosticsmostra/"+npat,
        "table": "#pacients_diagnostics_mostra",
        "fields": [ {   
                label: "NHC:",
                name: "npat",
                type: "readonly",
                def: npat
            },{
                label: "Data del diagnòstic:",
                name:  "data_diagnostic",
                type: "readonly"
            },{
                label: "Microorganismes:",
                name: "pacients_diagnostics_view[].id",
                type: "select",
                multiple: true,
                fieldInfo: 'Amb la tecla CTRL podeu seleccionar més d´un valor'
            }
        ]

I compare with original exemple, where filter works and i can't see the error.

I use type : select. In original example is datatables, but in my environment this doesn't works. May be old version.

Any help will be welcome. Many thanks !!!

i have a column in database "upload_date(datetime) where i want to store current timestamp

  {
          label: "Upload Image",
          name: 'ops_analysisImg[].id',
          type: 'uploadMany',
          display: (fileId, counter) =>
            `<img src="${editor.file('ops_analysisImg', fileId).web_path}"/>`,
          noImageText: 'No image',
          clearText: "Clear",
        },

This is my serverside script

 ->join(
        Mjoin::inst('ops_analysisImg')
            ->link('ops_dailyLog.id', 'ops_imglinktable.logID')
            ->link('ops_analysisImg.id', 'ops_imglinktable.imgID')
            ->fields(
                Field::inst('id')
                    ->upload(
                        Upload::inst($_SERVER['DOCUMENT_ROOT'] . '/operations/uploads/__NAME__')
                            ->db(
                                'ops_analysisImg',
                                'id',
                                array(
                                    'filename' => Upload::DB_FILE_NAME,
                                    'filesize' => Upload::DB_FILE_SIZE,
                                    'web_path' => Upload::DB_WEB_PATH,
                                )
                            )
                            ->validator(Validate::fileSize(500000, 'Files must be smaller that 500K'))
                            ->validator(Validate::fileExtensions(array('png', 'jpg', 'jpeg', 'gif'), "Please upload an image"))
                    )
            )
    )

const options = {
  fixedColumns: false,
  columnDefs: {
    targets: [9, 10, 11],
    render: function () {
      return DataTable.render.date();
    }
  },
  scrollX: true,
  select: true,
  info: false,
  language: language
};

and right now it still displays the date as ISO8601.

If i use the way as it is suggested in this example: https://datatables.net/examples/datetime/auto-locale-moment.html i get [Vue warn]: Invalid vnode type when creating vnode: undefined..

When serverSide is set to false the ajax GET request works.

When serverSide is set to true, the ajax GET fails. Any ideas what might be causing this?

What is the easiest way to add headers to a child table? The child table for this test case does not have headers.

<a href="#" onclick="checkBal('269C9607C92FE045B3A121CEE3F17FD6');">PINV</a>

the page is loaded via ajax and includes a script inline with datatable loaded after document ready. I have tried the checkBal function in intiComplete, after $document Ready and before ready in the script tag. The table loads ok with all rows correct inc urls. However onclick error Uncaught ReferenceError: checkBal is not defined I realise this is something to do with scope so where do I define the function ?

Thanks

   function getQueryParameter(name) {
      var urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
    }

    var logId = getQueryParameter('id');

    setTimeout(function () {
      if (logId) {
        $('#assyntCx_Table tbody tr').each(function () {
          var rowId = $(this).find('td:first').text().trim();
          if (rowId === logId) {
            $(this).find('td').css({ 'background-color': 'blue', 'color': '#000' });

            table.scroller.toPosition(this);
          }
        });
      }
    }, 2000);

I have a datatable editor php script used for server side processing. Sometimes, especially the first time requested by the front end, it reports "Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 20480 bytes) in ......" But after refreshing the page, it successfully responds with json data which is just around 15 kb.

Does anyone have any idea why memory size error reports the first time requested, and then works well?

Thanks.