I have enabled colReorder, I have noticed when rearrange columns they are fine, if I refresh the column headers are in the position I dragged them to - but the column data isn't.
The column data is got throguh my Ajax source, this adds the data in the original order like so:
nestedData[] = 'col1';
nestedData[] = 'col2';
Do I need to get the reordered data to use my in my array indexes? If so how can I do this (note at the point of declaring the column data array indexes I am in PHP).
I have this code in editor:
the problem is that it says i have same name for 'zcv_orders_details.data', can i set an alias or something?
Field::inst( 'zcv_orders_details.data' )->getFormatter( function ( $val, $data ) { return date( 'H:i d-m-Y', $val);})
Field::inst( 'zcv_orders_details.data' )->getFormatter( function ( $val, $data ) { return date( 'd-m-Y', $val);})
Full code:
// Build our Editor instance and process the data coming from _POST
$editor = Editor::inst( $db, 'zcv_orders_details', 'zcv_orders_details.id' )
->fields(
Field::inst( 'zcv_orders_details.id' ),
Field::inst( 'zcv_clients.firstname' ) ->validator( 'Validate::notEmpty' ),
Field::inst( 'zcv_clients.lastname' ) ->validator( 'Validate::notEmpty' ),
Field::inst( 'zcv_orders_details.data' )->getFormatter( function ( $val, $data ) { return date( 'H:i d-m-Y', $val);})
Field::inst( 'zcv_orders_details.data' )->getFormatter( function ( $val, $data ) { return date( 'd-m-Y', $val);})
)
->leftJoin( 'zcv_clients', 'zcv_clients.id', '=', 'zcv_orders_details.clients' );
if(isset($_POST['year'])){
$editor->where( 'FROM_UNIXTIME(zcv_orders_details.data, "%Y")', $_POST['year']);
}
if(isset($_POST['month'])){
$editor->where( 'FROM_UNIXTIME(zcv_orders_details.data, "%c")', $_POST['month']);
}
if(isset($_POST['sala'])){
$editor->where( 'zcv_orders_details.gyms', $_POST['sala']);
}
$editor
->process( $_POST )
->json();
Any idea is really apreciates.
Hey All!
I'm noticing a problem with my drop downs - I believe it's due to having a Bootstrap badge in my column values.
My column values are this:
But are being displayed as this in the dropdown:
I'm using the following function to create the dropdowns:
initComplete: function ()
{
this.api().columns().every( function ()
{
var column = this;
var select = $('<select class="selectpicker show-tick" data-live-search="true"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j )
{
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
I have a feeling the bolded part is what is causing the issue, but I'm not entirely sure how to fix it.
var select = $('<select class="selectpicker show-tick" data-live-search="true"><option value=""></option></select>')
Any guidance would be greatly appreciated, been stuck on this for a day or two now 
Is this exposed? I noticed Editor ships with a datetime picker for the datetime field type. I want to use this for my search dialogs too.
Hi,
I initialize datatable from fully populated HTML table. The data in some of the columns are wrapped in HTML tags, such as <td><span class="local">10.1.1.20</span><td>. I am able to create custom sorting functions to extract the actual data 10.1.1.20 from the wrapping tags.
When it comes to column filtering or global searching, is there a similar mechanism to the custom sorting so that the wrapping tags can be stripped off before the filtering or searching function is applied?
Thanks
Fairly new to JavaScript and using DataTables -- fantastic product so far.
My only issue is that when I perform a file upload (uploadMany option on my field), I need to also include the ID.
I've also noticed that id doesn't actually get substituted when the ajax call is made -- my debugger shows it LITERALLY going to /AudioClips/Edit?id=id, rather than /AudioClips/Edit?id=123123123123123123 (or some such thing)
$(document).ready(function ()
{
editor = new $.fn.dataTable.Editor(
{
ajax: {
type: "POST",
url: "/AudioClips/Edit?id=_id_"
},
idSrc: "id",
table: "#Table_7b1e6ea34e74470fa1b1836333a1f899",
fields: [
{ name: "name", label: "Name" },
{
name: "clips",
label: "Audio Clip",
type: "uploadMany",
noFileText: "No Clips Uploaded.",
display: function (fileId, counter)
{
return '<img src="' + editor.file('files', fileId).web_path + '"/>';
}
}
]
} );
$('#Table_7b1e6ea34e74470fa1b1836333a1f899').on('click', 'tbody td', function (e)
{
editor.inline(this);
} );
It'd honestly be easier for me to include the DT_RowID in the actual data getting passed into the ajax -- so using the data() function inside of ajax { } would be far superior, if there is a method to that.
Any thoughts?
I am trying to get Quill to work in a script that I generated using the Editor, but despite following the instructions on
https://editor.datatables.net/plug-ins/field-type/editor.quill
it still is not working.
Does anybody have a working example, that I could follow.?
I get response for Node js server side processing as given below
data […]
fieldErrors []
files {}
options {}
But for php server side processing,i get
draw 5
recordsTotal 11
recordsFiltered 11
data […].
Using node js server side processing and keeping serverSide:"true" gives Showing 0 to 0 of 0 entries (filtered from NaN total entries), and also search is not working,
Thanks in advance
Hi,
I have an application which has to allow for a user to search for an occupation, with or without an occupation_group filter.
Using a Select2 field to select a filter for the search works fine.
However, if the user decided not to use a filter, the occupation_group field needs to be set to the appropriate group for the chosen occupation.
Here is my code:
// Set the value of the title and description fields when the template changes
editor.dependent( 'occupation_id', function ( val ) {
$.each(select_options, function( key,result ) {
if(result.id == val) {
editor.val('title',result.text); // Works!
editor.val('description',result.description); // Works!
//** Doesn't work**: editor.val('occupation_group_id',{value:result.occupation_group_id, label:result.occupation_group} );
// **Doesn't work:** $('#DTE_Field_occupation_group_id').select2('data', {id: result.occupation_group_id, text: result.occupation_group});
$('#DTE_Field_occupation').select2('close'); // Works!
filter = '';
}
});
});
I have checked that the result contains the required information. "title" is a text field, and "description" is a textarea, and they are set to the correct values. "occupation_group_id" is a Select2 field.
I would really appreciate any pointers.
Hello,
I love these tables so much, however i want to know if i can add range slider instead of search input box, and the range slider will sort out the entire table based on a single column range?
Thank you 
Ruki
A couple of questions / issues when using Datatables in combination with Parcel bundler.
I am quite new to bundlers, especially Parcel. So apologies if I misunderstand the instructions.
Context: using simple example that uses <table> as datatable:
$('#example').DataTable( {
dom: 'Bfrtip',
select: true,
buttons: [
'copy', 'excel', 'pdf'//, 'selectAll', 'selected'
]
} );
I used the Datatables download tool (1. framework: DataTables, 2 packages: jQuery 3, DataTables; extensions: Buttons, HTML5 export, JSZip, pdfmake, Print view, Responsive, Select).
When using download method CDN everything works as expected.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
When using download method Yarn I have several issues. I followed the instructions: added the modules (yarn add), and added the requires to the app.js:
var $ = require( 'jquery' );
require( 'jszip' );
require( 'pdfmake' );
require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-responsive-dt' )();
require( 'datatables.net-select-dt' )();
1) CSS is not loaded?
I don't see any Datatables CSS being loaded.
2) no buttons are displayed
None of the buttons are displayed / visible in the source code.
3) selectAll, selected, print, give Uncaught Unknown button type
When I e.g. add selected, selectAll or print I get in the log e.g.: Uncaught Unknown button type: selectAll
4) pdfmake gives fs error on build
<path>/node_modules/pdfkit/js/image.js:32:33: Cannot statically evaluate fs argument
<path>/node_modules/png-js/png-node.js:45:29: Cannot statically evaluate fs argument
<path>/node_modules/fontkit/index.js:43:31: Cannot statically evaluate fs argument
<path>/node_modules/pdfkit/js/font/afm.js:11:41: Cannot statically evaluate fs argument
Could be this is related to https://github.com/parcel-bundler/parcel/issues/432
I tried @import 'datatables.net-dt' but that had no effect (CSS still not loaded).
I don't get the mentioned error message (main.css:2.1).
It refers to a blog post, I have the feeling that was not created yet?
I want to filter data in data table between the range of date.
Hi, I try to use IntiComplete function to call js function when the whole table is created. But It doesn't work when I go to another page. I use initComplete to aggregate sum in a group . I add initComplete to the example 
https://datatables.net/examples/advanced_init/row_grouping.html
And It's work fine when the table is generated but It crashs on page click. Any suggestions to make aggregation work though paging.
Hi everyone,
I've been strugeling for more than 8 hours with this until now so I have decided to write here to see if someone can give me a hand instead of losing more time... because maybe it's not posible.
I have a huge table (very long), which is group on the header using col-spans. I'm adapting an Excel software to web, and DataTables has been a must for me due to it's filter and ordering capabilities, which are awesome.
I'm been requested by the client to have this functionality on the table:
I can get the colspan from the header, I have this number on the code. I have tried with the Buttons Extension but the client is not accepting this solution. Have tried with CSS and have no success on it.
Hope someone can help or have deal with this before.
Best regards,
Daniel
When using Metro UI and Datatables select, when a row is selected, it is shifted to the right by one column.
Metro UI developer advised to write on this forum
Sample project
I am using the following datatables example for the purpose of export button. However, i am unable to remove title from the excel export by changing title:''. The code is as follows:
<script type="text/javascript">
$(document).ready(function () {
$('#table_id tfoot th').each(function () {
var title = $(this).text();
$(this).html('<input type="text" placeholder="' + + '" />');
});
var table = $('#table_id').DataTable({
responsive: true,
stateSave: true,
"deferRender": true,
"paging": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
stripeClasses: false,
"pageLength": 50,
dom: 'Blfrtip',
buttons: [
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print',
],
title: ' ',
}
],
columnDefs: [
{
targets: "_all",
className: 'dt-center'
}
]
});
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
$('#table_id').show();
});
</script>
Hello,
I'm facing a small problem with the fields object when initializing the editor.
dataEditor = new editor({
ajax: "/endpoint",
table: '#' + targetDiv + "-table",
idSrc: "0",
fields
});
Atm fields are like this:
name: 0,
type:text
name: 1,
type:text
name: 2,
type:text
This is due to the fact that I initialize the table this way:
let options = {
buttons: parsedButtons,
data: parsedRows,
columns: [0:{"title" : "firstname"}, 1:{"title": "lastname"} 2:{"title": "description"}],
.....
}
$('#' + targetDiv + "-table").removeAttr('width').DataTable(options);
I do this because my data has the following format:
{
"title" : "DATATABLE",
"filter" : true,
"columns" : [ {
"editable" : false,
"type" : "text",
"title" : "firstname",
}, {
"editable" : false,
"type" : "text",
"title" : "lastname",
}, {
"editable" : false,
"type" : "text",
"title" : "description",
}],
"rows" : [ {
"row" : [ {
"text" : "Allan",
"color" : null,
"backgroundColor" : "#FFF"
}, {
"text" : "Jardine",
"color" : "#000",
"backgroundColor" : "#FFF"
}, {
"text" : "Business Owner",
"color" : "#000",
"backgroundColor" : "#FFF"
} ]
}
But what I want to do is use names instead of numbers for the fields.
name: firstname,
type:text
name: lastname,
type:text
name: description,
type:text
And if I do this, I get the following error:
Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11
I have also tried to add name parameter to columns but with no success.
Is there any easy way to achieve this?
Thanks in advance!
hi i used 1.10.12 version, i've created a datatable master and on doble click row i draw a datatable details. on detail i want use a buttons plugin but not worked and not fire anything javascript function. below my code of detail datatable .
function format(rowData) {
var div = $('
')
.addClass('loading')
.css('overflow', 'auto')
.css('height', '40vh')
.text('Loading...');
var _url = App.getGlobalWcfErgonPath() + "GetDtPianoDiCaricoDetail"
var _data = JSON.stringify({ pCdDeposito: $("#pCdDeposito").val(), pDtConsegna: moment($('#pDtConsegna').closest('div.date-picker').datepicker('getDate')).format(), pCdGiro: rowData.CdGiro });
var detailsTableOpt = $('#tablePianodicaricoDetail').clone().attr('id', 'tablePianodicaricoDetail' + rowData.CdGiro).dataTable({
'dom': 'Bfrtip',
'data': [],
'searching': false,
'info': false,
'paging': false,
'language': { "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Italian.json" },
'destroy': true,
'order': [],
'buttons': [
{
text: '<i class="fa fa-print" aria-hidden="true"></i>',
titleAttr: 'Stampa',
action: function (e, dt, node, config) {
alert('Button is enabled');
}
},
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copia',
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel',
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF',
}
],
'columns': [
{ data: "CdCli", title: "Cliente", className: "dt-center", visible: true, orderable: false },
{ data: "RagioneSociale", title: "Ragione Sociale", className: "dt-left progress", visible: true, orderable: false },
{ data: "GV", title: "GV", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
{ data: "OF", title: "OF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
{ data: "SG", title: "SG", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
{ data: "PF", title: "PF", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
{ data: "CR", title: "CR", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
{ data: "SL", title: "SL", className: "dt-right", visible: true, orderable: false, render: function (data, type, full) { return jsFunctionHideZero(data, type, full); } },
{ data: "TotaleKg", title: "Tot. KG.", className: "dt-right", visible: true, orderable: false },
{ data: "Im", title: "Importo", className: "dt-right", visible: true, orderable: false },
],
});
$.ajax({
type: "POST",
data: { "StringSearch": _data },
url: _url,
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
}).done(function (result) {
detailsTableOpt.show();
detailsTableOpt.DataTable().clear().draw();
detailsTableOpt.DataTable().rows.add($.parseJSON(result.Data)).draw();
var h = $(detailsTableOpt.DataTable().table().container()).html()
div.html(h).removeClass('loading');
}).fail(function (jqXHR, textStatus, errorThrown) {
alert("errore:" + textStatus);
});
return div;
}
function Details(data, tr) {
var row = $('#tablePianodicaricoMaster').DataTable().row()
if (tr.child.isShown()) {
// This row is already open - close it
tr.child.hide();
$(tr).removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show;
$(tr).addClass('shown');
}
}
somebody can help me?
Hi
I have published my Aurelia business project here: https://fysegplannerwebapp.azurewebsites.net/#/projects/CABL2016/employee/28/plan
Y have configured the DataTable in this way:
configureDataTable() {
this.$outSourcingDataTable = $(this.outSourcingDataTable).DataTable({
info: false,
searching: false,
paging: false,
scrollX: true,
fixedColumns: { leftColumns: 4 },
scrollY: "400px",
scrollCollapse: true,
data: this.projectOutSourcingData,
columns: this.columns
});
}
because I want to fix the first 4 columns but does not work. I don't know if is problem of the extension or what
Any idea Please?
Regards
I'm trying to work out some conditional formatting for column 4 and 5, based on these criteria:
if value <= 0, color here
if value => 1, color here
if value => 2, color here
if value => 3, color here
if value => 4, color here
if value => 5, color here
I've read I need to use rowcallback in order to use this, but I can't get my head around it.
Best regards