Hi there,
I've already seen this post, posted in 2014 and you answered that there was no way to change the language labels dynamycally.
Is that still not possible?
I searched for this for hours and this would be very, VERY useful for me, that I'm developing an app that needs this.
Thanks in advance,
Aaron.
I'm using data tables with a code-maker, but I have a problem looking in the table for one of the fields, the database field saves a numerical value, but I show in the table the value in the name that you want to join with another table to tell me the name of that identification, the problem is that when looking in the error table all the time if I use the join.
example.
field of my table products category_id = 1
in the table categories category id = 1 name = first.
In the table the first name appears in the category column, when I use join between the products and categories table, but I get an error when I try to search the table, but if I do not use join, I do not get an error but the results in the column the table shows the numerical value and not the name, that is, category = 1.
I am having an issue where when I use the Always visible editing panel feature found here: https://datatables.net/blog/2017-06-30 with server side 
//server
Field::inst( 'applicationForm.branchID' )
->options( Options::inst()
->table( 'branches' )
->value( 'name' )
->label( 'name' ))
->validator( 'Validate::dbValues' )
//editor
{
label:'Branch',
name:'applicationForm.branchID',
type:'select'
}
The interesting thing is that when I switch back to the standard modal method I see the data in the select list. If I make the select list static by passing an array of values to the option parameter in editor I also see the select. However that method will not suit my needs at this time. Is there a fix for this?
Using datatable on SharePoint Online, is there a way to replace the text with icons based on values?
Example: Value = In, display <img src='/_layouts/images/KPIDefault-2.GIF'/>
I was using client side rendering but can't figure out how to do this in datatable.
(function() {
var oFldCtx = {};
oFldCtx.Templates = {};
oFldCtx.Templates.Fields = {"InOut": {"View": overrideStatus} };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();
function overrideStatus(ctx) {
var oStatus = ctx.CurrentItem.InOut;
if (oStatus == 'In') {
return "<img src='/_layouts/images/KPIDefault-0.GIF'/>";
}
if (oStatus == 'Out-A') {
return "<img src='/_layouts/images/KPIDefault-2.GIF'/>";
}
if (oStatus == 'Out-P') {
return "<img src='/_layouts/images/KPIDefault-1.GIF'/>";
}
}
Chrome Version 62.0.3202.94 (Official Build) (64-bit)
Using SharePoint Online/Office 365. When I first add the webpart and link it to the datatable, it works fine. However, whenever I update the HTML or JS, the changes don't reflect back in the web part. I tested in Edge and it works fine, it updates the data upon browser refresh.
Hello!
I'd like to set a default value in one of the camps of the multi-filter select (https://datatables.net/examples/api/multi_filter_select.html)
I'd also like to set the default searchbar text to said value. Is it possible to do both?
Thanks!!!
I would like to do local editing in editor, but every time I edit something there is an ajax call after the draw; my table is set to serverside:true.
Common sense would tell me that serverside datatables need to render serverdata after changes but then again maybe local edits would apply to the current page.
I need operators to edit rows in a 9 thousand record table. They are doing inline edits on each row. It takes too long to wait for the ajax call per inline edit so I would like to send changes to the server with a button to the right of the column or if possible, draw the change in the local table immediately regardless of ajax response.
The colReorder.move() does not update the data-column-index accordingly - when the value tags are inspected after the move method is called, i.e visually the columns change positions however this is inconsistent with the data-column-index values under inspection. Thus causing further issues when working with the positioning in any other way.
Try testing this by initializing a basic DataTable with colReorder and somewhere in the js call the move method to relocate a column. Then inspect and observe the values of the data-column-index. Additionally, try dragging and observe the change of the data-column-index values. To make things more interesting try using the Column Visibility option to see the inconsistency of the positions when certain columns are removed from the visibility.
I was just experimenting with some styles and found out that DataTables animate the table row that has been edited, as suggested in this post and it works in this example.
But when I want to use server-side processing serverSide: true, the flash animation does not work anymore.
It does not work even in the example Server-side processing.
Could you please advise?
Peter
How can we export data in datatable to excel or csv format which includes footer information also. Currently, footer gets exceluded. However, on setting footer as true for pdf I am able to get in PDF format.
PDF FOOTER EXPORT WORKS:
extend: 'pdfHtml5',
footer: true
EXCEL / CSV FOOTER EXPORT DOES NOT WORK tried setting footer same as above for extend: 'excel'
I'm not sure if this is the best place to post this but I noticed the select form input for bootstrap 3 and 4 was missing the form-control class. It looks like this is due to a typo on line 152 on the editor.bootstrap.js file. It currently reads:
$('input:not([type=checkbox]):not([type=radio]), elect, textarea', field.node() )
Changing the typo, 'elect', to 'select' adds the form-control class to the select input.
Hi,
in Chrome (Version 61.0.3163.100 (Official Version) 64 bit), it opens new tab but does not display the print preview, even setting autoPrint: true
Firefox, Safari, Edge and IE are ok apparently.
In this example the same problem occurs when you click Print, open the tab, and display the print preview. After closing the preview and clicking Print again, open the tab but not the preview .: https://datatables.net/extensions/buttons/examples/initialisation/export
I have a column with checkboxes, and I want to be able to order by this column; i.e., when I click on the header of this column, I want to see all rows with checked boxes on top.
I tried to use the method from https://datatables.net/forums/discussion/20950/changing-data-order-after-initialization , so I use the data-order attribute of <td> tag; in the beginning all attrs are equal to 1, and after checking the box the attr becomes 0.
I do both row().invalidate() and cell().invalidate(), but nothing helps - this row doesn't sort according to data-order!
Here is a small example: http://chgkstat.org/datatables_example
Check the second checkbox, then press button. You'll see that second <td> has data-order=0 and other cells in this column have data-order=1. But first column still doesn't sort when you click its header!
Can you please see how to fix this?
hello alan ..
how i can change my custom design for editor / new Forum.. as show in image below
i need to change according to my custom design as shown below image
please let me know how can i change design ...
i can change using class name and also weather it reflect to any responsive or what ?? if i can using class name...
regards
karthik.r
Hi..
If i want to show my editor form in new window insted of the lightbox, with the Display controllers function...
When i push the edit button i want the form will show in another page in new window..
How can i do that?
Thank you
Eli
I'm using Bootstrap and DataTables on the front-end of my admin dashboard project. Using the Responsive extension is not as easy at I thought, I have to do a lot of tweaking to get it right.
I have an off-canvas sidebar that completely breaks responsiveness of the table when it is activated. The table doesn't resize when the parent shrinks its width to fit said sidebar. Weirdly enough, pagination and search input do move with the parent element.
Here's the table's CSS
.full-width {
width: 100% !important;
max-width: 100% !important;
white-space: nowrap;
}
table.dataTable {
border-collapse: collapse !important;
}
.control {
padding: 0 20px !important;
}
div.dataTables_wrapper div.dataTables_length select {
width: 45px;
}
table.dataTable>tbody>tr.child ul.dtr-details {
width: 100%;
padding: 0 10px;
}
@media screen and (max-width : 992px) {
.dataTables_paginate {
margin-top: 20px !important;
}
}
And the JS
$("#table").DataTable({
responsive: {
details: {
type: 'column'
}
},
columnDefs: [{
className: 'control',
orderable: false,
targets: 0
}],
order: [ 1, 'asc' ],
lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]]
});
The sidebar code is pretty much this -> https://startbootstrap.com/template-overviews/simple-sidebar/ only on the right instead on the left.
It looks like this when the sidebar is active:
And like this when it isn't:
When I tried to resize it to see if it would work on mobiles, it got even weirder
Please help!
Thank you.
Hi,
We have to open the editor on focus but post data to server only when user makes some changes or type in the field. We are able to achieve this feature with **editOnFocus ** option but data is being posted randomly to server while only navigating the table and making no change.
We observed the same behavior on tabbed column example screen, on reaching the 3rd row it submit few next columns and rest works fine. 
Hi,
My company has a problem with the websites protected by CloudFlare.
In fact, when we visits your website, we have a Captcha page because our IP is probably blacklisted.
We have to be whitelisted because most of our internal applications are using libraries on your website.
This problem appear:
"Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cdn.datatables.net/plug-ins/1.10.7/i18n/French.json. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant."
This error message appeared this morning.
Hi Allan,
I got a problem while integrating select extension with fixedColumns, i think the same thing with this.
I got this same situation.
- when clicked oTable rows, it updates fixed column row but on wrong index.
- when i click fixed colum row, it doen't select child table row.
Do you get an update how to get rid with this issue ?
This is my code.
var table = $('#master_table').DataTable( {
"scrollX": true,
"columnDefs": [ {
"searchable": false,"orderable": false,"targets": [-1, 0]
} ],
"order": [[ 1, 'asc' ]],
select: {
style: 'os',
selector: 'td:not(:last-child)'
},
buttons: {
buttons: [
'selectAll',
'selectNone',
{extend:'excel',text:'<i class="fa fa-download"></i> Download',titleAttr:'Export to Excel'},
{extend:'colvis',text:'<i class="fa fa-filter"></i> Filter'}
]
}
});
table.select();
var fc = new $.fn.dataTable.FixedColumns(table,{
leftColumns: 2,
rightColumns: 0
});
table.$('tr').click( function () {
fc.fnUpdate();
});
And iam using this:
- FixedColumns 3.2.0
- Select for DataTables 1.2.2
Appreciate Any idea how to solve this.
Hello,
I'm using DataTables on this page: http://dutypoint-4097839.hs-sites.com/downloads As you can see, it appears the entries are being 'capped' or limited to 1000, when the database they are being retrieved from has 1544 entries. Here is the code I am using:
var otable = $('#example').dataTable({
"ordering": false,
"searching": true,
/*stateSave: true,*/
"lengthMenu": [[10, 25, 50], ["10 Results Per Page", "25 Results Per Page", "50 Results Per Page"]],
"columnDefs": [ { "targets": [ 2 ], "visible": false, "searchable": true } ]
});
I am also using a 'client' side setup, as in, the data is supplied as HTML, not from a server. Does anyone know why the entries are being limited to 1000? I've searched the docs and can't find anything obvious.
Thanks,
Steve