Hi,
I'm trying to implement the colReorder function along with order and colVis functions.

Problem is that if I move a column, the indexes returned from order or colvis functions is the original one and not the actual one.

For example, consider a table with 3 columns (id 0, 1 and 2), column 0 contains internal data so it's hidden by default and not considered in the colVis columns, I order column 2 and then switch it with column 1:
- before moving column, table.settings().order() returns [ 2, "asc" ]
- after column has been moved i expect to receive [ 1, "asc" ], but I get [ 0, "asc" ]

So, if I save table.settings().order()'s result to the database and then use it back on next table initialization, everything is messed up. I've menaged to solve this replacing the returned index with table.colReorder.transpose(idx) in a for cycle, but is this really the way to go?

With colVis is even worst and I don't even know how to work around it. In the same scenario as above, if I select from the dropdown menù the column number 2, it remains visible, column 0 becomes visible between column 2 and 1, column 1 remains visible.
I've set up a demo for you: https://jsfiddle.net/0yc8sd1z/. Please, switch the 2 columns and then try to hide the column "Office".

Hello,

Like in my sample : https://jsfiddle.net/SuiteProG/obL647z9/6/ the render function is call many times but work look like a cache is enabled.
Can I disabled cache for each call in render function write in my columns ?

In my sample, my column is hidden at 11:21:00. If show column at 11:22:00, the content of column will be 11:21:00. So I want write 11:22:00, like my render function return when showing column.

Is it possible ?

Thanks,

SuiteProG

Hello, I recently purchased the editor and we are strugling to initialize it.

Until now, I managed to work with the trial version this way:

import $ from 'jquery';
let editor = require("./dataTables.editor")(window, $);

dataEditor = new editor({
        table: '#' + targetDiv + "-table",
        fields,
        ...
    });

Since purchasing the licence, I downloaded the same file I did previously with the trial version and did:

node node_modules/datatables.net-editor/install.js pathToEditorZip
But now it shows an alert saying:

DataTables Editor must be initialised as a 'new' instance'

and the error on the console:

Uncaught TypeError: Cannot read property '_constructor' of undefined
    at Editor (dataTables.editor.js:80)

I've tried to install the trial version again and it works, no alert and no error in console.
What is different in the purchased file and how could I make it work?

Edit:
I forgot to mention that the moment the alert and error appears is at this line:
let editor = require("./dataTables.editor")(window, $);
Just saying that it doesn't even get to the line where I start the editor.

I have the following php working ok:

    Editor::inst( $this->editorDb, 'importApplication', 'importNo' )
    ->fields(
      Field::inst( 'importApplication.appNo' ),
      Field::inst( 'importApplication.seqNo' ),
      Field::inst( 'importApplication.title' ),
     // cut short
      Field::inst( 'importApplication.lastModifiedBy' ),
      Field::inst( 'supportDocReview.lastModified' )
          ->options( Options::inst()
            ->table( 'supportDocReview' )
            ->value( 'appNo' )
            ->label( 'lastModified' )
          )
      )
      ->leftJoin ( 'supportDocReview', 'importApplication.appNo', '=', 'supportDocReview.appNo')
      ->process( $_POST )
      ->json();    

then wanna add a where clause to filter data from a column (code):

$codeList = ( 406, 407 );      // list of codes to display
Editor::inst( $this->editorDb, 'importApplication', 'importNo' )
    ->fields(
      Field::inst( 'importApplication.appNo' ),
      Field::inst( 'importApplication.seqNo' ),
      Field::inst( 'importApplication.title' ),
     // cut short
      Field::inst( 'importApplication.lastModifiedBy' ),
      Field::inst( 'supportDocReview.lastModified' )
          ->options( Options::inst()
            ->table( 'supportDocReview' )
            ->value( 'appNo' )
            ->label( 'lastModified' )
          )
      )
      ->leftJoin ( 'supportDocReview', 'importApplication.appNo', '=', 'supportDocReview.appNo')
      ->where( function ( $q ) {
        $q->where( 'code', $codeList, 'IN', false );       // where clause to get all those codes
      } )
      ->process( $_POST )
      ->json();    

end up with this error,
DataTables warning: table id=appSummary - Invalid JSON response.

please help.

I have an editor where I set the language options with an url (file) like
'language': { 'url': '/js/language/datatables_swe.json' }
the json file contains the same strings that work when I set them in the javascript file

{
  
    "sEmptyTable": "Tabellen innehåller inget data",
    "sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
    "sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
    "sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
    "sInfoPostFix": "",
    "sInfoThousands": " ",
    "sLengthMenu": "Visa _MENU_ rader",
    "sLoadingRecords": "Laddar...",
    "sProcessing": "Bearbetar...",
    "sSearch": "Sök:",
    "sZeroRecords": "Hittade inga matchande resultat",
  "oPaginate": {
    "sFirst": "Första",
    "sLast": "Sista",
    "sNext": "Nästa",
    "sPrevious": "Föregående"
  }
}

But when I set them that way the swedish letters å, ä and ö are shown as a questionmark (?).
Any suggestions how I can fix that ?

Hi Everyone

I've just used the bar bones of the editor to update tables I need to edit and its working great (using in-line editing). However, I'm not sure how to move forward on this. I have a screen that list of samples taken during a specific inspection. showing 1) Where it was taken 2) the item it was taken from (window, wall, etc) 3) it's Sample number.... in addition I'm displaying 2 additional "Results" selections - the "Result" and "Recommended Action". I can update both these fields no problem and the data base it updating correctly. My problem is,,,, When I select the "Result" - I need 2 things to happen.

1) Set another field called "SampleType" - this is a value based from 0 to 3 depending on which "Result" is selected - so basically I need to use a select/case check the "result"
2) once Sample Type is done I need to do some maths and update a field called "totalRisk" using the value in SampleType and three other fields.

The above is easy in MS Access. I'm sure it's sometihing I need to do on an **event ** such as **change ** on the "Result" select- but I'm not sure how to move forward on this.

If anyone has an idea I would greatly appreciate it.

Thank you in advance for any guidance

Hello,

I am trying to re-open my child rows when the table automatically reloads with the ajax.reload function of dataTable. (this will cause all the child rows to collapse)

But it seems like my child rows don't have ID's. How can I do this with the code below. I'm stuck on this for a few days now.
Hopefully someone can help me or point me in the right direction.

<script>
    var $tagsLabel = $("<lable>");
    var $tagsInput = $("<textarea>");

    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row
        console.log(d);
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
            '<td>Raw text:</td>' +
            '<td>' + d.Raw_html + '</td>' +
            '</tr>' +
            '</table>';
    }

    $(document).ready(function () {
            var detailRows = [];

            var dt = $("#dataTable")
                .on("preInit.dt", function (e, settings) {
                    $tagsLabel.append($tagsInput);
                    $('.dataTables_tags').append($tagsLabel)
                })
                .on("init.dt", function (e, settings) {
                    $tagsInput.tagEditor({
                        delimiter: ', ',
                        placeholder: 'Enter search keywords ...',
                        onChange: function (field, editor, tags) {
                            if (tags.length) {
                                if (tags.length > 1) {
                                    $table.search(tags.join('|'), true, false).draw();
                                } else {
                                    $table.search(tags[0]).draw();
                                }
                            } else {
                                $table.search('').draw(true);
                            }
                        },
                    });
                }).DataTable({
                    mark: true,
                    "searchHighlight": true,
                    "dom": '<l<"dataTables_tags"><t>ip>',
                    "ajax": '/json-int',
                    "columns":
                        [
                            {
                                "class": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": '',
                                width: "5px"
                            },
                            {"data": "Timestamp", width: "135px"},
                            {"data": "Title"},
                            {"data": "Url"},
                            {"data": "domain"},
                            {"data": "Type"},
                            {"data": "Raw_html", "visible": false}
                        ],
                    "order":
                        [[1, 'asc']],
                    "initComplete":

                        function () {
                            setInterval(function () {
                                dt.ajax.reload(null, false);

                                var currentdate = new Date();
                                var datetime = currentdate.getDay() + "/" + currentdate.getMonth()
                                    + "/" + currentdate.getFullYear() + " @ "
                                    + currentdate.getHours() + ":"
                                    + (currentdate.getMinutes() < 10 ? '0' : '') + currentdate.getMinutes() + ":" + currentdate.getSeconds();
                                document.getElementById("lastUpdated").innerHTML = "Last updated: " + datetime;
                            }, 5000);
                        }
                }).on('draw', function () {
                    $.each(detailRows, function (i, id) {
                        $('#' + id + ' td.details-control').trigger('click');
                    });
                });


            $('#dataTable 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'));
                    }
                }
            });

            dt.on('draw', function () {
                $.each(detailRows, function (i, id) {
                    $('#' + id + ' td.details-control').trigger('click');
                });
            });
        }
    );
</script>

Good day all

I have some trouble with getting a correct datetime format from data coming from a WebApi that i want to use in my table.

the data looks like this:

{
     "data": [
         {
             "Pfid": 61000,
             "Typ": "D",
             "Pplats": "636-05-B",
             "Artnr": "VSV182840",
             "Artben": "Galler Spirit 800C KPL",
             "Saldo": 3,
             "Saldotyp": "ST",
             "Saldoochtyp": "3 ST",
             "Pgrp_nr": 1035,
             "Ordernr": "116595",
             "Rappnr": 23382114,
             "Trp": "646",
             "Artrev": "1",
             "Pkg": 1,
             "Pkg_total": 1,
             "Reported_by": "Lillo Italo Valdivia",
             "Datum": "2018-12-04T05:48:14.183",
             "Npgrp_nr": 0,
             "Op": 0,
             "Nop": 0,
             "Flyttad": "2018-12-04T13:23:33.33"
         }
    ]
 }

and this is my datatable config using moment and datetime plug-in

<script src="/DataTables/datatables.min.js"></script>
<script src="/DataTables/datetime/moment.js"></script>
<script src="/DataTables/datetime/datetime.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {    
            $('#example').DataTable({
                ajax: {
                    "url": '/api/MaMaDB/GetPfInfo?user=test',
                    "type": "GET"
                },                
                columns: [
                    { data: "artnr" },
                    { data: "artben" },
                    { data: "saldo" },
                    { data: "saldotyp" },
                    { data: "pgrp_nr" },
                    { data: "ordernr" },
                    { data: "rappnr" },
                    { data: "trp" },
                    { data: "reported_by" },
                    { data: "datum" },
                ],
                columnDefs: [
                    { targets: 9, render: $.fn.dataTable.render.moment('YYYY-MM-DD') }
                ]
            });
        });

    </script>

but i only get invalid date in the date column and not the date format that i want

if i dont use datetime plugin datatables will just output the date as 2018-12-04T05:48:14.183

Any idea how i need to modify the settings for it to recognize the dates in the data correctly?

Best Regards
Mattias

Hi All,

I wanted to insert a "Heading column" when the editor window is opened. This changes based on the context, if a new record is created no heading is displayed where as if a existing record is edited it displays some text. I have used the below code

editor.on('open', function(e,json,data){
    console.log('open');
    console.log(json);
    console.log(data);
    console.trace();

    if (data == 'edit')
    {
        var html = "<center><div id=\"headingtext\" class=\"alert alert-success\">Approve for payment</div></center>";
         $('div.DTE_Form_Content').prepend( html );
    }
});

This method is invoked twice so the prepended html appear twice. Please see the picture below. If i see the stack trace it is invoked from the same handler twice.

I have a similar code in similar html page but there it is only invoked once. I'm using the following header files

<!-- Required datatable js -->
        <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>


        <script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
        <script src="https://cdn.datatables.net/plug-ins/1.10.19/api/sum().js"></script>

        <!-- Buttons -->
        <script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.bootstrap4.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/jszip.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/pdfmake.min.js"></script>
        <script src="../../assets_uplon/plugins/datatables/vfs_fonts.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
         <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js"></script>
        <!-- Key Tables -->
        <script src="https://cdn.datatables.net/keytable/2.4.1/js/dataTables.keyTable.min.js"></script>

        <!-- Responsive -->
        <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>

        <!-- Selection table -->
        <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>

        <!--datatables-editor ext -->
        <script src="../../php/Editor181/lib//js/dataTables.editor.min.js"></script>
        <script src="../../php/Editor181/lib//js/editor.bootstrap4.min.js"></script>

Dear Allan!
I found new problem In fixed row.
I turn off redraw, and the editor can change edited row data, but not change fixed column data.
The data is wrote in fixed col, but not refresh.
If I move with arrow on the fixed column (selected) or click mouse on fixed column (selected), the fixed column refreshing, and see good data.
(my test table fixed column is second (Revízió). Change any column, press enter, or leawe edited cell, and press selected column Revízó or go back arrow key to Revízo , and You will see my problem.
You can test:
http://infoportal-hu.ddns.net:62080/index.php?module=TablePage&ID=21
You can login:
email:allandatatables@gmail.com
Jelszó:
AllanDatatables
If you logged in jump again http://infoportal-hu.ddns.net:62080/index.php?module=TablePage&ID=21

Thanks
Gyula

Thanks in advance for the amazing tool, I am new to web development and http://prometadb.igib.res.in/ is the link to our website which includes a data table in the METABASE section. The view of the table is getting distorted in browsers other than chrome. how to fix this. I will be glad if any one could help.

I use this code in my Javascript Editor instance field definitions:

}, {
    label: lang === 'de' ? 'Dokumentation:' : 'Documentation:',
    name: "file[].id",
    type: "uploadMany",
    display: function (fileId, counter) {
        var fileNameExt = contractEditor.file('file', fileId).name;
        if (fileNameExt.substr(0,9) === 'interface') {
            return '';
        }                
        return fileNameExt;
    },
    dragDropText: dragDropText,
    uploadText: uploadText,
    noFileText: noFileText,
    processingText: processingText,
    fileReadText: fileReadText

Files with names starting with "interface" shouldn't be displayed in the Editor popup because I don't want the users to be able to delete them. This doesn't really work because there still is this little button to delete the file in Editor even though the label isn't there because I set it to blank. I tried to return null or false but that didn't work either.

Is there any solution for this?

This is what it looks like with the little delete button for the unlabeled file at the right hand side.

Hi all, i have a problem with a Datatables.
Normally i hide specific column but now i need a hide a column If the information in the column is specific.
Example: if my column 7 have a information "99" i need hide this column.
I dont find anything google or another forum about this.

Hi all, i have a problem with a Datatables.
Normally i hide specific column but now i need a hide a column If the information in the column is specific.
Example: if my column 7 have a information "99" i need hide this column.
I dont find anything google or another forum about this.

Dear Allan!
I want to search data in datatables (not filter, or search), and select cell when I found data, and scroll to selcted cell.
Its woking when ajax not loaded new block from server.
Can You tell me what event run when data loaded, and can you test this problem?

You can test this:
log my test system, and type in Keresés cell qqqq and press right arrow on screen.
The select found qqqq in cell and will selkect, and scroll to cell.
Press right arrow key on screen again, the ajax runing and after process endig, the cell not select.
Press right arrow key on screen again, the ajax not runing and the founded cell selected.

You can test:
http://infoportal-hu.ddns.net:62080/index.php?module=TablePage&ID=25
You can login:
email:allandatatables@gmail.com
Jelszó:
AllanDatatables
If you logged in jump again http://infoportal-hu.ddns.net:62080/index.php?module=TablePage&ID=25

Thanks:
Gyula

Hello,
I'd like to know if we can format data before to display it into dataTable.
I get a json with this structure for instance:

{
"id": "TEST3",
"lastLoginDate": null,
"createDate": "Dec 19, 2018 4:36:43 PM",
"updateDate": "Dec 19, 2018 4:36:43 PM",
"active": 1,
"roles": ["ROLE_SUPER_ADMIN", "ROLE_ADMIN", "ROLE_USER"]
}

Here's my dataTable :

I'd like to add space or a line break or any css style. Is that possible ?

Here's my code :

    function drawTable(){
        currentTable = $('#dataTables').DataTable({
            responsive: false,
            ajax: {
                "url": restURI + 'orch/search/all/users/',
                "type": "POST",
                "contentType": 'application/json',
                "dataSrc": ""
            },
            order: [0, 'asc'],
            scrollCollapse: true,
            scrollX: false,
            "columns": [
                { "data": "id", "defaultContent": "", "sClass": "text-center limitedWidth" },
                { "data": "roles", "defaultContent": "", "sClass": "text-center limitedWidth" },
                { "data": "lastLoginDate", "defaultContent": "", "sClass": "text-center limitedWidth" },
                { "data": "createDate", "defaultContent": "", "sClass": "text-center limitedWidth" },
                { "data": "updateDate", "defaultContent": "", "sClass": "text-center limitedWidth" },
                { "data": "active", "defaultContent": "", "sClass": "text-center limitedWidth" },
                { "data": null, "defaultContent": "<button class=\"btn btn-warning inline\">Desactivate</button><button class=\"btn btn-success inline\">Activate</button><button class=\"btn btn-info inline\">Update</button>", "bSortable": false, "sWidth": "85px", "sClass": "text-center limitedWidth"}
            ],
            'rowCallback': function(row, data, index) {
                if(data.active == "1") {
                    $(row).find('td:eq(6)>button:eq(0)').hide();
                } else {
                    $(row).find('td:eq(6)>button:eq(1)').hide();
                }
            }
        });
    }

Thank you !

Let me explain what I"m trying to achieve.

I have this large table, and I would like to have a section on the same page where I can see some stats related to this table, without actually filtering it.

So say I have 4,000 lines. I would like to have a list that says how many lines have Monday, how many have Tuesday, etc... without actually applying the filter to the table?

Hello everyone,

I'm new to DataTables and I love it. I started with a simple table with 6 columns. Depending on the values in column 2 and 3 of a row I would like to highlight cell 4 in the same row. I tried to google this, but the only solution I found was a option for column (cssFormat:mark_votes). I read the Reference on datatables.net but couldn't find this option. I also tested it (try & error), but as aspected it didn't work.

I hope I descriped my problem / feature request clearly. Otherwise please give me a short hint and I will try to do better.

Thanks for any ideas.

Best Regards

Thorsten

I have a dropdown with 4 different item types including one to call all item types. When i call for each item type, I do not get any error alert and gets my table but when i do all item types i get that invalid JSON alert warning. There are 1078 rows and receiving when i check in debugger tools. Is there a way to bind this objects(data) I am getting to any variable so that i could check them. If so then how?

hi, i have a problem with datatable, when i do a request the json response with a serie of data, in which there are two dates, the data table show them in a following them: 15466878780000, i used "render: $j.fn.dataTable.render.moment( 'Do MMM YYYYY' )", but the result was "invalid date",
already added the librarys:
jquery.dataTables.min.js
moment.js
datetime.js

the database that i use is oracle 12c and theb framwork is spring 3.2.4