dataTables.editor.js:10 Uncaught TypeError: (intermediate value)[(intermediate value)(intermediate value)(intermediate value)] is not a function
at dataTables.editor.js:10
at dataTables.editor.js:10
at dataTables.editor.js:10
at dataTables.editor.js:10
(anonymous) @ dataTables.editor.js:10
(anonymous) @ dataTables.editor.js:10
(anonymous) @ dataTables.editor.js:10
(anonymous) @ dataTables.editor.js:10

datatables.min.js:14 jQuery.Deferred exception: $.fn.dataTable.Editor is not a constructor TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (http://localhost/gestor/js/table.ufs.js?versao=7:13:15)
at j (https://cdn.datatables.net/v/dt/jq-3.2.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/r-2.2.1/sc-1.4.4/sl-1.2.5/datatables.min.js:14:29999)
at k (https://cdn.datatables.net/v/dt/jq-3.2.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/r-2.2.1/sc-1.4.4/sl-1.2.5/datatables.min.js:14:30313) undefined
r.Deferred.exceptionHook @ datatables.min.js:14
k @ datatables.min.js:14
setTimeout (async)
(anonymous) @ datatables.min.js:14
i @ datatables.min.js:14
add @ datatables.min.js:14
(anonymous) @ datatables.min.js:14
Deferred @ datatables.min.js:14
then @ datatables.min.js:14
r.fn.ready @ datatables.min.js:14
(anonymous) @ table.ufs.js?versao=7:11
(anonymous) @ table.ufs.js?versao=7:186

datatables.min.js:14 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
at HTMLDocument.<anonymous> (table.ufs.js?versao=7:13)
at j (datatables.min.js:14)
at k (datatables.min.js:14)

FILE Config.php

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Database user / pass
*/
$sql_details = array(
"type" => "Mysql", // Database type: "Mysql", "Postgres", "Sqlserver", "Sqlite" or "Oracle"
"user" => "gsyst796_elias2", // Database user name
"pass" => "xxxxxx", // Database password
"host" => "br.hostgator.com.br", // Database host
"port" => "3306", // Database connection port (can be left empty for default)
"db" => "gsyst796_gestor", // Database name
"dsn" => "", // PHP DSN extra information. Set as charset=utf8 if you are using MySQL
"pdoAttr" => array() // PHP PDO attributes array. See the PHP documentation for all options
);

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Links for library
*/
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.2.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/r-2.2.1/sc-1.4.4/sl-1.2.5/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">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css">
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jq-3.2.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/r-2.2.1/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
---> library Licensed

<!--script type="text/javascript" charset="utf-8" src="js/dataTables.editor.js"></script-->
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https:cdn.datatables.net/plug-ins/1.10.15/dataRender/datetime.js"></script>

Hello,

Im new in this, and found this plug-n really difficult to implement (Remember the old good times when adding a server datagrid was drag an drop and voila!!! working) set every single feature of this plug in is a nightmare, since add a button to refresh the grid or to add an export without your css crashes...

Todays pain is this:

Need to change cell colour when some data is X

$(document).ready(function () {
var oTable = $("#Table").DataTable({
"scrollX": true,
"ajax": {
"url": "datatblescrap",
"dataSrc": "",
"type": "POST",
"data": function ( d ) {
d.val1= $("#xx").val() ,
d.val2 = $("#xx").val();
},
"createdRow": function (row, data, index) {
$(row).addClass("red");
},
},
"columns": [
{ "data": "abc" },
{ "data": "abb" }
]
});

                                       $("#button").click(function () {
                                           $('#Table').DataTable().ajax.reload();
                                       });

                                   });

I saw a super basic example where it works, however this do nothing... what the hell i am doing wrong?

Its just a single line for gods sake...

Is there another plug in easy to use instead of this??
thanks.

Observations:

• These are for detection only to facilitate sorting: $.fn.dataTable.moment("MM-DD-YYYY");, and $.fn.dataTable.moment("YYYY-MM-DDTHH:mm:ss");
• The render function and moment.js can be used to format your date:

render: function (data, type, row) {
    return moment(data).format('MM-DD-YYYY');
}

Situation:

If my date is a raw time stamp, and my declaration is: $.fn.dataTable.moment("YYYY-MM-DDTHH:mm:ss");,

BUT, I'm rendering the date like this: return moment(data).format('MM-DD-YYYY');,

THEN It won't sort. I must detect it like this: $.fn.dataTable.moment("MM-DD-YYYY"); instead.

HOWEVER, upon a <tr> click, the date is still the raw datestamp -- the original data, which is fine.

Questions:

What is the best date format to send to DT? Should I send back a raw datetime? Or, should I format it the way I want it on the backend?

It seems like $.fn.dataTable.moment is looking at rendered data. What's the difference between the raw data and the rendered data, in this scenario?

If I don't need to worry about it, just tell me to stop.

Hi,

I needed to add and adjust some functions in Button extension and decided to go for a clean solution by building DataTables from Source. This work pretty well, thanks to the make.sh. However, now I have various min.js files in built/js folder, but not the overall datatables.min.js I am used to. Please find a screenshot in the attached picture.

Which file do I have to embed in my project? Is there something like a datatables.min.js which comprises all relevant functions as it is the case for the regular Download Version?

I appreciate your support. Thanks,
Clemens

Hi everyone,
I have a simple datatable with editor features. Very basic.
I use the inline mode.
However when I click a cell to edit it, the width of that cell increases a lot, which is not pretty at all.
As soon as I leave it (submit on blur), then the cell gets back its original width.

Why do this happen ?
And why at the same time it works so well in the example datatable shown in the the website here: https://editor.datatables.net/examples/inline-editing/simple.html ?

Thanks a lot!

After countless hours searching for working code to accomplish this I finally gave up and started from scratch. This is very tricky to do as most examples I found were simply moving the .selected class to other rows which isn't how datatables works... I tried using the row indexes to manipulate to select rows using the provided methods and this did not work either. For some reason the indexes would not select the proper rows. I finally found a tip from allan in a thread to use .nodes() and after much JQuery work and experimentation this is what I came up with.

To use the keydown listener on the .dataTable class you must add tabindex="0" to your table tag.

<table style="width:100%" cellpadding="0" cellspacing="0" border="0" id="cinfocon" class="row-border" tabindex="0">

This is the only way unless you wish to listen on the entire document, which causes
other issues. You can add the following css override to get rid of the focus outline.

.dataTable:focus {
  outline: 0 !important;
}

You also much make sure that you have your rowHeight set correctly on the scroller options or the visible rows will be calculated incorrectly.

scroller: {
  rowHeight: 35
},

And finally here is the code.

$(function(){
  $('.dataTable').keydown(function (e) {
    switch(event.keyCode)
    {
      //arrow down
      case 40:
      var thisRow = $(this).DataTable().row( { selected: true } ).node();
      var nextRow = $(thisRow).next('tr');
      var nextRowIdx = $(nextRow).index();
      var displayIndexes = $(this).DataTable().scroller.page();
      var indexDiff = displayIndexes.end - displayIndexes.start;
      var rowCount = $(this).DataTable().rows().count();
      var scrollTo;

      if (!(nextRowIdx > rowCount)) $(this).DataTable().row(nextRow).select();

      if ((displayIndexes.end) > rowCount) {
        scrollTo = $(this).find('tbody > tr:not(\'.group\')').eq(rowCount - indexDiff);
        $(this).DataTable().row(scrollTo).scrollTo(false);
      } else {
        scrollTo = $(this).find('tbody > tr:not(\'.group\')').eq(displayIndexes.end);
        if (nextRow[0] == scrollTo[0]) $(this).DataTable().row(scrollTo).scrollTo(false);
      }

      e.preventDefault();
      break;
      //arrow up
      case 38:
      var thisRow = $(this).DataTable().row( { selected: true } ).node();
      var lastRow = $(thisRow).prev('tr');
      var lastRowIdx = $(lastRow).index();
      var displayIndexes = $(this).DataTable().scroller.page();
      var indexDiff = displayIndexes.end - displayIndexes.start;
      var scrollCheck = $(this).find('tbody > tr:not(\'.group\')').eq(parseInt(displayIndexes.start) - 1);
      var scrollTo;


      if (!(lastRowIdx < 0)) $(this).DataTable().row(lastRow).select();

      if ((displayIndexes.start - indexDiff) > 0) {
        scrollTo = $(this).find('tbody > tr:not(\'.group\')').eq(displayIndexes.start - indexDiff);
        if (lastRow[0] == scrollCheck[0]) $(this).DataTable().row(scrollTo).scrollTo(false);
      } else {
        scrollTo = $(this).find('tbody > tr:not(\'.group\')');
        if (lastRow[0] == scrollCheck[0]) $(this).DataTable().row(scrollTo).scrollTo(false);
      }

      e.preventDefault();
      break;
    }
  });
  $('.dataTable').focus();
});

This code will provide working arrow navigation for all datatables on a page and even accounts for rowGroups.

My hope is that this saves someone else a lot of time and effort... I was kinda blown away that no working code was around yet but after writing it I can see why. It's a PITA! Have a nice day.

I have one field that when the user inserts a value, the value is checked from the database, and if the value is valid, it automatically sets the value for the next field.

Next field is set using:
datatable.cell(row, 3).data(value);

The cell value is set correctly, but after it looses the focus, the value disappears.
And when it receives the focus, it appears again.

Please see the following video, it will show a live example: https://meocloud.pt/link/7a7fc072-d964-481f-affd-b1548495a59b/Editor.mkv

There is nothing in the code that can cause this, and i'm totally baffled.
Any idea on what can cause this problem, or how to avoid it?

I try https://datatables.net/extensions/buttons/examples/print/simple.html

Another one for the mighty Allan I think.

Is there an easy way to set a default time when the time picker widget displays or initially sets the time in an input field?

At the moment it defaults to the current hour and '-' for minutes (I've got 15 min increments set). When the on chnage event is fired by a user changing the hour, the input field updates to show the selected hour and the current minute. If the current time is 09:33 and I click the timedate field and change the hour select to 10 the input field will display 10:33. I'd like my users to only be able to select either 00,15,30,45, is there a way to default the mins to 00 when the widget is displayed/input field is initially updated?

Also, is it possible to make editor fields read only so users have to use the date/time picker rather than being able to manually enter dates and times?

Cheers

Example: http://live.datatables.net/lidequra/9/edit

In this example, I am putting the column filter in the head of the table on a few columns.

Problem: When I "Export CSV" - The column headings are all muddled as it is using all the values from the select lists

1. I am assuming that this is unavoidable? There is no way to set a column header which is used in CSV BUT the filter still remains?

2. I tried moving the filter to the footer (not ideal but at least a solution) BUT - when I revert the code back to what it originally was, the filters do not show.

Current:
var select = $('<select><option value="">' + $(columnHeaderCell).html() + '</option></select>') .appendTo( $(column.header()).empty() )

Altered for footer() = not working:

var select = $('<select><option value="">' + $(columnHeaderCell).html() + '</option></select>') .appendTo( $(column.footer()).empty() )

Why wont the select show in the footer?

I have this piece of code where I try to implement form template change when "New" record button is clicked:

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

(function() {
  var Editor = $.fn.dataTable.Editor;
  Editor.display.details = $.extend(true, {}, Editor.models.displayController, {
    init: function(editor) {
      // Setup the lightbox - we'll use it for new entries
      Editor.display.bootstrap.init(editor);
      return Editor.display.details;
    },

    open: function(editor, append, callback) {
      var table = $(editor.s.table).DataTable();
      var row = editor.s.modifier;

      // Close any rows which are already open
      Editor.display.details.close(editor);

      if (editor.mode() === 'create') {
        // No row being edited - its a new row. Use Editor's lightbox
        Editor.display.bootstrap.open(editor, append, callback);
      } else {
        // Open the child row on the DataTable
        table.row(row).child(append).show();

        $('div.DTE input:not([type=checkbox]):not([type=radio]), div.DTE select, div.DTE textarea').addClass('form-control');

        $(table.row(row).node()).addClass('shown');

        if (callback) {
          callback();
        }
      }
    },

    close: function(editor, callback) {
      if ($('div.modal div.DTE').length) {
        Editor.display.bootstrap.close(editor, callback);
      } else {
        var table = $(editor.s.table).DataTable();

        table.rows().every(function() {
          if (this.child.isShown()) {
            this.child.hide();
            $(this.node()).removeClass('shown');
          }
        });

        if (callback) {
          callback();
        }
      }
    }
  });
})();

// We start table with launching Editor
$(document).ready(function() {
  editor = new $.fn.dataTable.Editor({
    ajax: {
      create: {
        type: 'POST',
        url: '/ratecard/ratecards'
      },
      edit: {
        type: 'PATCH',
        url: '/ratecard/ratecards/_id_'
      },
      remove: {
        type: 'DELETE',
        url: '/ratecard/ratecards/_id_'
      }
    },
    table: "#ratecards-table",
    idSrc: "id",
    fields: [{
      label: "Name:",
      name: "name"
    }, {
      label: "Type:",
      type: "select",
      name: "status",
      "options": [{
          "label": "Ratecard",
          "value": "ratecard"
        },
        {
          "label": "Deal",
          "value": "deal"
        },
        {
          "label": "Inactive",
          "value": "inactive"
        }
      ]
    }]
  });

  // Here we render ratecards table
  var table = $('#ratecards-table').DataTable({
    dom: "<'row'<'col-sm-6'B>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-5'l><'col-sm-7'p>>",
    ajax: $('#ratecards-table').data('source'),
    rowId: 'id',
    columns: [{
        className: 'details-control',
        orderable: false,
        data: null,
        defaultContent: '',
        width: 30
      },
      {
        data: "name"
      },
      {
        data: "status"
      },
      {
        data: "id"
      }
    ],
    columnDefs: [{
      targets: [-1],
      visible: false
    }],
    order: [
      [1, 'asc']
    ],
    buttons: [{
      extend: 'create',
      text: 'Add new',
      editor: editor,
      formButtons: [{
          label: 'Cancel',
          fn: function() {
            this.close();
          }
        },
        'Create',
      ]
    }, {
      extend: 'collection',
      text: 'Export',
      buttons: ['copy', 'excel', 'csv', 'print']
    }, {
      extend: 'colvis',
      columns: ':gt(0)'
    }]
  });  // more code follow here...

So far I've been looking to this example and tried to add to my code these lines:

  editor.on('preOpen', function(e, data, action) {
    if ( action === 'edit' ) {
      editor.template( '#ratecards-form' );
      editor.display ("details");
    }
    else if ( action === 'create' ) {
      editor.template( '#new_ratecard-form' );
    }
  });

however no luck so far. I get modal window for "New" record, which is OK, however for "Edit" I get an error: jquery-3.3.1.min.self-8...0e9.js?body=1:3 Uncaught RangeError: Maximum call stack size exceeded
When I close modal, then click any of "New/Edit" buttons, strange things happen - some empty modal, etc. It looks like I'm doing something wrong here.

How do I make for "New record" modal to show different template than for "Edit record", please?

I have nested web grid implemented with data table. When I am searching table, it searches in the child table data as well. Because of which once I do search the expand/collapse functionality doesn't work?

I'm using complex header concept and the first row of the thead is hidden. Now I have applied colspan to the next row in the thead. what I'm facing is I'm unable to apply a sort to the header containing colspan. Is there any possibility to handle sorting for the header having colspan.. below is my code and a screenshot with a black border block showing where exactly I need sorting function for thead marked in the image.

Pankaj Sharma

Thanks in advance.

Hi EveryOne I am new to datatables hence want to ask a simple question:
('#example').dataTable({"search": {regex: true}}).search("London|Tokyo", true, false ).draw();
when i do this I get perfect results but I dont want to put hardcoded data but the dyanamic one that comes from search box.
In case of Dynamic Values it only searches for value before "|" character.

I am using the datatable library to display a list of tasks, I have implemented a function that allows to reorder tasks with the RowOrder function, but I want to make a control that allows to order a task only if the date of the task is below the target date.

Hi

We are using Datatable inline editing to submit data on server. For one table we are experiencing weird behavior , if some change any cell value and then click on any other cell it show the old value for a while and then shows updated value. We have also enabled Keys and it works fine with Key navigation. I am attaching a short video clip. https://drive.google.com/file/d/13htfqq6ESj46qRKbTzExUywjAvo8yNyE/view

Thanks

I have a field whose value is a number and the sign €, when I do the summation if I do it well but when I do the average it gives me the error.

"footerCallback": function (row, data, start, end, display) {//Aqui meto los subtatales y totales por pagina en el pie de la tabla
                var api = this.api(),
                data;
                var intVal = function (i) {
                    return typeof i === 'string' ? i.replace(/[\€,]|Kg/g, '') * 1 : typeof i === 'number' ? i : 0;
                };


jQuery.fn.dataTable.Api.register( 'average()', function () {
                    var data = this.flatten();
                    var sum = data.reduce( function ( a, b ) {
                    return  intVal(a*1) +  intVal(b*1); // cast values in-case they are strings
                    }, 0 );
  
                return (sum) / data.length;
                } );    

Hi, i want to know how can I implement a custom pagination. I am retrieving data from db, populate them to datatable and set pagination per 10 rows. So far so good.
What if i would like to do pagination based on the first column (id). The first column is type numeric from 0000 to 9999 (not continuous) and unique. I would like to make pagination when the id is changing (example 0000-0010 , 0011-0019 ...).
The problem is that the numbers are not continuous...
Thanks in advance......

I have a datatable with 15000 entries that is provided from the Groovy backend and I am using the following options to render the datatable

                deferRender:    true,
                scrollCollapse: true,
                scroller: {
                    loadingIndicator: true,
                },                    
                bFilter: true, //disable searchbar
                info: true, //disable "showing x results"
                paging: true, //show all
                colReorder: true,
                dom: 'lBfrtip',
                        "lengthMenu": [ 10, 25, 50, 100 ],
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ],

But still the page takes around one 1 min to load the datatable, how can I reduce the time of loading the datatable
Also, I am using pagination, so is there a way to load only first 10 entries and then load others?

I want to display data in my datatable of webpage without reloading the webpage or click any button for the retrieval purpose, but i should be able to get more data using the pagination.
for example: https://datatables.net/examples/server_side/defer_loading.html
I need something of these kind but here the data is static, and even the ajax seems to pretty static in these example, i would like to know how would i achieve this task.
Thanks
Koka