Hi Allan ... happy New Year! 
I'm still having the issue with the multiselect fitering on the MJOIN table. (Old post: https://datatables.net/forums/discussion/39606/mjoin-and-multiselect-filtering-issue). I've sent you a private message prior to the holidays with the details and the link. By any chance, how can I solve this? Do I need to change sth with the mysql table setup maybe?
Many thanks
I have found the Column Groups method (https://datatables.net/extensions/buttons/examples/column_visibility/columnGroups.html)
and is what we are after however is it possible to use the column groups as a toggle button rather than it shows certain columns and hides others.
For example I want it to show columns 4,5,6 and not hide any.
Then if it is clicked again it will hide 4,5,6.
Hello everyone,
i am now trying to modify the table before saving it as EXCEL and i don't know how to add two sentences before the table starts. For example add one new row before the table and input there a text. I am now using the following code to make the column G blue. I can use the customize ability, but no idea how 
buttons: [{
extend: 'excel',
text: 'Save in EXCEL',
filename: 'td900',
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// $('c[r=A1] t', sheet).text( 'Custom text' );
// Loop over the cells in column `F`
$('row c[r^="G"] ', sheet).each( function () {
// Get the value and strip the non numeric characters
if ( $( this).text() !== "needed Adjustment" ) {
$(this).attr( 's', '20' );
}
});
}
}]
hey guys,
i am using the buttons extension for dataTables. if i click them, my table become smaller and smaller...
here is the fiddle: https://jsfiddle.net/L2wnku2u/#&togetherjs=fAn47ri9zR
=> just klick the buttons pretty often in the left top corner.. the inline-style of the table set the width smaller!
I have a table that loads as it should. However, when edit a row, nothing is returned in "data" and the row disappears from the table. When I reload the table the row shows again and with the correct edited fields, so it does update the database as expected.
EDIT: No, it doesn't update the database now. It did before but I must have done something when trying to find the problem... 
I also notice when doing "remove" the row disappears from the table but not from the database, so when reloading it appears as in the initial load.
I have a feeling it has something to do with my own mistake, but can't figure out what...
Worth mentioning maybe that this is a table #2 on my page, so this table is loaded depending on what row a user choose in table #1. But I renamed everything so there shouldn't be a conflict. They also call different php-pages...
I also tested to put an alert on preEdit and postEdit of this editor but they never fire.
<?php
// DataTables PHP library
include( "../php/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
if(!isset($_POST['action'])){
$blastid = $_GET['bid'];
}
else{
$blastid = $_POST['bid'];
}
Editor::inst( $db, 'holes', 'hole_id' )
->field(
Field::inst( 'holes.hole_nr' ),
Field::inst( 'holes.hole_depth' ),
Field::inst( 'holes.hole_drilled' ),
Field::inst( 'holes.hole_boostered' ),
Field::inst( 'holes.hole_kaxed' ),
Field::inst( 'holes.hole_redrill' ),
Field::inst( 'holes.blast_id' )
->set(false)
)
->where('blast_id', $blastid)
->process($_POST)
->json();
?>
//Initialize table holes, depending on blastchoice
$('#tbl-admin-blasts').on( 'click', 'a.holes', function () {
bl_id = bTable.row($(this).closest('tr')).id().substring(4);
var blast_name = bTable.cell( $(this).closest('tr'), 0 ).data();
$("#holediv").removeClass("hidden");
$(".holetitle").html("för salva <b>" + blast_name + "</b>");
if(hTable !== null){
hTable.destroy();
};
hTable = $('#tbl-admin-holes').DataTable( {
language: {
"url": "js/helpers/Swedish.json"
},
dom: 'B<"clear"><"hToolbar">rtlip',
responsive: true,
processing: true,
ajax: {
url: "../_includes/process_adminholes.php?bid=" + bl_id,
type: 'POST'
},
order: [ 0, 'asc' ],
columns: [
{ data: "holes.hole_nr", responsivePriority: 1 },
{ data: null,
render: function(data, type, row){
return parseFloat(data.holes.hole_depth).toFixed(1);
},
className: "dt-center",
responsivePriority: 2
},
{ data: null,
render: function(data, type, row){
if(type === 'display'){
if(data.holes.hole_drilled === "1"){
return '<i class="fa fa-check" style="color:#3cc958;"><i/>';
}
else{
return "";
}
}
else{
return data.holes.hole_drilled;
}
},
className: "dt-center",
responsivePriority: 3
},
{ data: null,
render: function(data, type, row){
if(type === 'display'){
if(data.holes.hole_boostered === "1"){
return '<i class="fa fa-check" style="color:#3cc958;"><i/>';
}
else{
return "";
}
}
else{
return data.holes.hole_boostered;
}
},
className: "dt-center",
responsivePriority: 4
},
{ data: null,
render: function(data, type, row){
if(type === 'display'){
if(data.holes.hole_kaxed === "1"){
return '<i class="fa fa-check" style="color:#3cc958;"><i/>';
}
else{
return "";
}
}
else{
return data.holes.hole_kaxed;
}
},
className: "dt-center",
responsivePriority: 5
},
{ data: null,
render: function(data, type, row){
if(type === 'display'){
if(data.holes.hole_redrill === "1"){
return '<i class="fa fa-stop-circle-o" style="color:red;"><i/>';
}
else{
return "";
}
}
else{
return data.holes.hole_redrill;
}
},
className: "dt-center",
responsivePriority: 6
},
{ data: null,
defaultContent: '<a href="#" class="hEdit" data-toggle="tooltip" title="Redigera"><i class="fa fa-pencil-square-o"><i/></a>',
className: "dt-center",
orderable: false,
responsivePriority: 2
},
{ data: null,
defaultContent: '<a href="#" class="hRemove" data-toggle="tooltip" title="Ta bort"><i class="fa fa-eraser" style="color:red;"><i/></a>',
className: "dt-center",
orderable: false,
responsivePriority: 3
}
],
select: false,
buttons: [
{ extend: 'create',
editor: hEditorCreate,
text: '<i class="fa fa-circle"></i> Nytt hål',
formTitle: '<i class="fa fa-ruller"></i> Skapa nytt hål',
formButtons: [{
label: '<i class="fa fa-undo"></i> Avbryt',
fn: function() { this.close(); }
},
'<i class="fa fa-floppy-o"></i> Spara'
]
},
{ extend: 'collection',
editor: hEditor,
text: '<i class="fa fa-download"></i> Exportera',
autoClose: true,
buttons: [
{ extend: 'copy', text: '<i class="fa fa-clipboard"></i> Kopiera' },
{ extend: 'excel', text: '<i class="fa fa-file-excel-o"></i> Excel' },
{ extend: 'csv', text: '<i class="fa fa-clipboard"></i> CSV' },
{ extend: 'pdf', text: '<i class="fa fa-file-pdf-o"></i> PDF' },
{ extend: 'print', text: '<i class="fa fa-clipboard"></i> Skriv ut' }
]
}
]
} );
} );
//editor for updating holes only
hEditor = new $.fn.dataTable.Editor( {
ajax: {url: "../_includes/process_adminblasts.php",
data: function(d){
return $.extend( {}, d, {
bid: bl_id
} );
}
},
table: "#tbl-admin-holes",
formOptions: {
main: {
submit: 'changed'
}
},
fields: [ {
"label": "Planerat djup:",
"name": "holes.hole_depth"
}, {
label: "Borrad:",
name: "holes.hole_drilled",
type: "checkbox",
options: [
{label: "", value: 1 }
],
separator: '',
unselectedValue: 0
}, {
label: "Boostrad:",
name: "holes.hole_boostered",
type: "checkbox",
options: [
{label: "", value: 1 }
],
separator: '',
unselectedValue: 0
}, {
label: "Kaxad:",
name: "holes.hole_kaxed",
type: "checkbox",
options: [
{label: "", value: 1 }
],
separator: '',
unselectedValue: 0
}, {
label: "Uppborrning:",
name: "holes.hole_redrill",
type: "checkbox",
options: [
{label: "", value: 1 }
],
separator: '',
unselectedValue: 0
}
]
} );
Hey guys,
i have the following dataTable: https://jsfiddle.net/zukii/Lucq6vc5/
With the Buttons extension i hide some columns..
Is there any oppurtunity to also show only a special "Type"? For example if I click on "Privat" (top left corner) in the column "Type" only "Privat" is shown? Or if I click "Gewerbe" only "Gewerbe" is shown in the "Type"-column..?
that would be perfect.. i hope anybody can help
greetings
Hello,
I'm trying to add a datatable inside a bootstrap panel, which has a 6 col width unless a small screen size is used. With ScrollY enabled, I notice the column headers aren't aligned unless the row set is larger than the px value defined in ScrollY. Is there any way I can align the column headers without having a large set of data?
Here is a JSFiddle:
https://jsfiddle.net/k9rn3qaa/19/
Any help would be greatly appreciated
I used the download builder to build a minified, single file, download of DataTables which included Bootstrap, Buttons, ColReorder, the DataTables core, JSZip, pdfmake, and Responsive. Separately, jQuery 2.2.0 and jQueryUi 1.11.4 are referenced.
I attempted to follow the example on the Buttons page about direct insertion using only the colvis button
var table = $('#example').DataTable( {
buttons: [ 'colvis' ]
} );
table.buttons().container()
.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
When I run this code however, I get a javascript error that 'table.buttons is not a function'. Am I missing a reference or prerequisite? Responsive and ColReorder are working fine. Debugger reference code is emajam
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Hi!
language.loadingRecords, doesn't work, Why?
From this https://datatables.net/reference/option/language.loadingRecords I've tried in numerous ways.
$('#example').dataTable( {
"ajax": "json.txt",
"language": {
"loadingRecords": "Please wait - loading..."
}
} );
Hi,
I'd just like to report a strange bug I've found when using custom editor templates (https://editor.datatables.net/examples/styling/template.html).
All other field names are generating correctly (e.g. only one input per fieldname), but for some reason this one field name is generating 15 times or so.
It's a simple text input, with field name <editor-field name="AP.nextduehourinterval"/> with a default value of 0.0
Nothing special on the PHP side...
Field::inst( 'AP.nextduehourinterval' ),
Same goes for the JS side as far as I know. There are multiple editors using this field name, but same goes for the other field names in the form.
When I perform a delete on an entry with an escaped character (e.g. apostrophe), it fails with a 'System error has occurred'. On the server side, I'm getting 'a potentially dangerous Request.Form value was detected'. It posts back with the escaped characters (' for apostrophe) on a delete, but not on a new or edit. I've added the 'requestValidationMode="2.0" to the httpRuntime element in web.config, but that didn't resolve it.
Also, I'd really prefer to have the string saved to SQL without the escapes. Is that possible?
Thanks,
Dave
When loading a datatable into a dialog I process initialisation files and scripts using $.getScript(url) and $.globalEval(script).
However, when I add the moment.js code I get the error "Uncaught TypeError: $.fn.dataTable.moment is not a function".
The script is
$.getScript("//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js");
$.getScript("//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js");
$.getScript("//cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/fc-3.2.2/fh-3.1.2/r-2.1.0/se-1.2.0/datatables.min.js");
$.globalEval(aScript);
aScript is
$.fn.dataTable.moment("DD-MM-YYYY HH:mm");
$("#filelist").DataTable(
{
//various settings
});
If I change the loading order of the files
$.getScript("//cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/fc-3.2.2/fh-3.1.2/r-2.1.0/se-1.2.0/datatables.min.js");
$.getScript("//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js");
$.getScript("//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js");
$.globalEval(aScript);
I get 2 errors
Uncaught ReferenceError: moment is not defined
and then
Uncaught TypeError: Cannot read property 'moment' of undefined
Any ideas?
Thanks
I have a situation where I need to be able to filter a secondary combo boxes values, based on a value selected from a previous combo box. I am very new to this coding thing and have been told of an ajax solution, but am finding it difficult to implement in practice. My example is based on a gold courses and their associated tee boxes.
So when a golf course is selected from the first combo box, the second combo must only display tee boxes linked to that golf course. This is to take place in the form displayed when updating a record. Any help in this regard would be greatly appreciated.
'golfcourses' is a table in the database and 'teeboxes' is the linked table in the database. golfcourses.Id is the primary key on the golfcourses table and the foreign key on the teeboxes table.
Any help will be greatly appreciated.
i have added
My code as below:
$("#tab_msDraft").on('click', function () {
$.ajax({
type : "GET",
url : "./rest/DQ",
datatype : 'json',
success : function(result) {
$("#msDraft_Loading").hide();
$('#msDraftTable').DataTable( {
//"bSort": true,
bJQueryUI: true,
fixedHeader: true,
destroy: true,
"scrollY": 350,
"scrollX": true,
scrollCollapse: true,
data: $.parseJSON(result).data.data,
"columnDefs" : [
{ "name": "Task Id", "data": "taskId", "visible": false, "targets": 0},
{ "name": "Job Number", "title" : "Job Number", "data": "JobNo", "targets": 1,
render: function ( data, type, row, meta ) {
if(type === 'display'){
data = '<a href="#" onClick="displayJobForm('+row.taskId+')">' + data + '</a>';
}
return data;
}
},
{ "name": "Form ID", "title" : "Form ID", "data": null, "defaultContent": "", "targets": 2 },
{ "name": "Submission Description", "title": "Submission Description", "data": "SubDes", "targets": 3 },
{ "name": "TPSM Provider", "title": "TPSM Provider", "data": "tpsmProvider", "targets": 4 },
{ "name": "Health Plan", "title": "Health Plan", "data": "healthPlan", "targets": 5 },
{ "name": "Effective Date", "title": "Effective Date", "data": "EffectiveDate", "targets": 6,
render: function (data, type, row, meta){
return displayFormattedDate(data, type, row, meta);
}
},
{ "name": "Status", "title" : "Status", "data": "RequestStatus", "targets": 7 },
]
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ {
type: "select",
values: [ 'Gecko', 'Trident', 'KHTML',
'Misc', 'Presto', 'Webkit', 'Tasman']
},
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
null,
null
]
});
},
error : function(xhl, status, error) {
alert(xhl + ' - ' + status + ' - ' + error);
}
});
});
Hi,
I want to add CSS classes to the pagination controls so that they look different.
I went through the documentation and got some information but don't want to take the effort.
Please give me a ready made code.
Regards,
Pankaj S Y
I am using fixed floating headers but when zooming on any browser the headers drop row. how can i prevent this
Hi ,
I have cell type "checkbox" , if Checked then Value will be "Y" else "N" .
If checkbox select or unselect , how to submit and set value Y or N in tables.
Regards.
Sunil
I'm using moment.js to sort the date in dd / mm / yyyy format, but as you can see from the debugging, does not recognize the date field on which to apply the formatting but the two empty fields used for the responsive and the selection of the line. Any idea of this behavior?
Thank you in advance.
Debug code: ayuter
I wish to display the info at the bottom of the table (normal or default). But how do I turn off the number of selected rows information?
It is a single mode selection and there is no need to display that message "1 row selected". If this cannot be turned off, how do I localize this? I have localized both the table and editor but cannot find entry for the selection information.
I need some help. I have been successful in uploading images and they are being stored on to my server. But the trouble is when I look in my database the file name is incorrect. Not sure why that it is.
According to my database the incorrect file name is "editor-fileName". But according to my saving feature of this line of code...
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )
This gives the correct file name on my server. But storing it into the database with this line of code is incorrect...
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )
->db( 'Table', 'ID', array(
'Field' => $pathToImg . Upload::DB_FILE_NAME
) )
But according to the documentation: https://editor.datatables.net/manual/php/upload#Database-information
It says that "Upload::DB_FILE_NAME File name (with extension)"
But it's not doing what I want it to. How do I tell it the File Name is what I saved it to? How do I do that?