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
Hi,
I’m a licenced user and have been implementing DataTables and Editor for an internal project. I’ve prechecked the documentation / forums and can’t get my head around this issue.
I have a Editable datatable, which is loading JSON data successfully from the server.
JSON from server:
{
"data": [
{
"DT_RowId": "row_3",
"FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
"PERCENT_SUBINVESTMENT_GRADE": "DEF",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_1",
"FUND_MANAGER": "SPDR Gold Tracker",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_2",
"FUND_MANAGER": "Transtrend (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""}
],
"options": [],
"files": []
}
On inline editing a cell value and then clicking out, the AJAX request is sent and the server returns the expected JSON but the rows are not being updated. Instead, I get an error message: ‘A system error has occurred (More information)’ under the field taking me to: https://datatables.net/manual/tech-notes/12.
JSON returned:
Have tried returning the above JSON (using the same URL for param ajax: under editor), as well as the following:
{
"data": [
{
"DT_RowId": "row_3",
"FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
"PERCENT_SUBINVESTMENT_GRADE": "DEF",
"BENCHMARK_DRIVEN": "GEF",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""
}
]
}
Kind regards
Hi
We're using Datatables in an application and have just started adding in the export to Excel function (using Buttons). It works great but have a question. In our tables we're using some hidden spans for sorting purposes (mostly dates). These hidden spans are also included in the export to Excel. Is there any way to not have these exported to Excel?
Thanks
Mark
With the Edit table, I am trying to run samples with SQLite. First, there are errors running the sql script. Fixed that. Second, there are errors with "var provider = DbProviderFactories.GetFactory(Adapter()); in Database.cs" Fixed that by hard coding the connection string to my SQlite DB. Now, I get the following error at the browser (http://localhost:49942/api/staff?_=1484082959664).
I have been at setting up the sample for hours. Am I missing something? Simple is killing me. Anyone have any thoughts? Thank you.
{draw: null, data: [], recordsTotal: null, recordsFiltered: null,…}
cancelled:[]
data:[]
debugSql:null
draw:null
error:"String was not recognized as a valid DateTime."
fieldErrors:[]
files:{}
id:null
meta:{}
options:{}
recordsFiltered:null
recordsTotal:null
upload:{id: null}
In it's current state, if you try to use the selectize plug-in with multiple values (i.e. a comma delimited list), when you edit the field, you do not get what is currently selected in the input box. I believe the set method in the plug-in code isn't accounting for the delimiter and is only passing back the full string. I hard coded my delimiter into the plug-in and it now works...
from:
set: function ( conf, val ) {
return conf._selectize.setValue( val );
},
to:
set: function ( conf, val ) {
return conf._selectize.setValue( val.split(",") );
},
I'm not sure if there is a way to pass the delimiter specified in the selectize opts (since hard coding is bad), but I wanted to make you aware of it.
I'm trying to port an existing web app into DataTables/Editor. Any record in the table being edited might have zero to many related records in another table. Is there any way from within an Editor form to invoke the editor again on the related table record in the related table? I'd like to be able to create a record in the related table when necessary, as well as to display the related records in that table. So far, I haven't found a way to do this within the DataTables/Editor framework.
Since this is a feasibility question, I don't have a problem pagers debug or link to. However, I can provide more detailed information if that would help someone who wants to respond.
Hi guy's,
I'm doing a big filtering system for the datatables, on which it consists on having multiple box's in each column, and in each box, there is a list of checkbox that come from the cache('search') and a multi filter system of multiple options between two selects and two inputs.
After battling with this, and almost finishing it, it came an strange issue. The cache function doesnt return any info on the data that is appearing on the table - it did yesterday. I already rollbacked alot of code and nothing.
This is the code I'm using...
table.columns().flatten().each(function (colIdx) {
table.column(colIdx).cache('search').sort().unique().each(function (d) {
console.log("inside")
});
});
As you can probably guess, it should run the message in the console, but nothing. Even when getting the data directly from the cache, It doesn't bring anything.
Did this happened to anyone?
Thank you!
Using the editor:inst function, I would like to associate an alias with the primary table name. For the most part the following code works great.
switch ($action) {
case 'controllers_datatable':
// Build our Editor instance and process the data coming from _POST
Editor::inst($db, $this->shape_access_controllers_m->ftn(). ' as sac ')
->fields(
Field::inst('sac.facilities_id'),
Field::inst('sac.access_points_id')->validator('Validate::notEmpty')
->options($this->shape_access_points_m->ftn().' as sap', 'id', 'name', function($q) {
$q->where('sap.facilities_id', $this->input->post('facilities_id',true));
}),
Field::inst('sac.ssh_port_num')->validator('Validate::notEmpty'),
Field::inst('sac.ssh_username')->validator('Validate::notEmpty'),
Field::inst('sac.ssh_password')->validator('Validate::notEmpty'),
Field::inst('sac.mysql_username')->validator('Validate::notEmpty'),
Field::inst('sac.mysql_password')->validator('Validate::notEmpty'),
Field::inst('sac.mac_address')->validator('Validate::notEmpty'),
Field::inst('sac.enabled')->validator('Validate::notEmpty')
// Field::inst('fac.city'),
// Field::inst('fac.state_abbr'),
// Field::inst('acc.name')->set(false)
)
//->leftJoin ( $this->shape_facilities_m->ftn().' as fac ', 'facilities_id','=','fac.id') // later gator
//->leftJoin ( $this->shape_access_points_m->ftn().' as sap ', 'access_points_id','=','sap.id') // later gator
->where ('sac.facilities_id',$this->input->post('facilities_id',true))
->process($_POST)
->json();
break;
}
}
That is it works find if I do an update operation, but if I do a create operation, I get an SQL error, "SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'as sac ( facilities_id, access_points_id, ssh_port_num, ssh_username, `' at line 1".
It appears, that my trick of using appending ' as sac ' to the table name in the editor::inst function is not the correct thing to do. Again it works find when I update and exiting record, but I cannot create a new record.
Hi!
During working with DataTables I noticed that in Internet Explorer 11 I'm unable to select text in thead. I thought it was my fault because I changed headers to individual column search input ( in which I wasn't able to select text and it's annoying) but it appears that DataTables is blocking text selection because even with zero configuration ( https://datatables.net/examples/basic_init/zero_configuration.html ) I can't select text in thead.
Using code found in http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object I checked what event are on each th and noticed that there is "selectstart" event bind on them. After deleting this event with jQuery off() function I can select text in my input but I'm afraid it will somehow affect work of DataTables. Is there any reason to be concerned?
EDIT: I'm using DataTables 1.10.12
I have three columns with class 'epic' and a button defined with:
action: function (e, dt, node, config) {
var columns = oTable.columns('.epic');
columns.visible(!columns.visible());
//columns.visible(true);
}
The column.visible(!column.visible()); hides the three columns on first click on the button, but does not show them again
columns.visible(true); works fine
Any ideas why the columns will not show on second click on the button?
example: http://jsfiddle.net/jpobley/593y16tf/1/
In my application I am saving certain table state, like ordering and page length, so that I can reload the table with updated data whenever I wish.
Now, recently, the number of columns that are being returned in the data has changed, which means that when I initialize the DataTable I get an error if my state tries to order the table using a column index that is no longer available:
TypeError: Cannot read property 'aDataSort' of undefined
This was easy enough to fix; I now verify that the index saved in state still exists on the data.
However, I'm unable to recover from the error using a try...catch and then create any more tables on the page because the DataTable instance from the first attempt is still hanging around and I get the following error:
TypeError: Cannot read property 'parentNode' of null
Is there any way to do a super destroy? Like, scorched earth, FTW??
Without the scrollX & scrollY parameters, the footer elements are successfully replaced with input boxes, allowing me to perform a column by column search. Once these parameters are included, the footer loses the input boxes.
I'm have this currently on http://live.datatables.net/sojeluju/1/edit
$(document).ready( function () {
var table = $('#example').DataTable({
"sPaginationType" : "full_numbers",
"ajax": "/examples/server_side/scripts/server_processing.php",
"processing" : true,
"serverSide" : true,
"fixedHeader" : true,
"lengthMenu" : [[10, 25, 50, 100, 200, -1],[10,25,50,100, 200, "All"]],
"pageLength" : 25,
"sScrollX" : "110%",
"sScrollY" : "600px",
"bScrollCollapse": true,
"columnDefs": [
{ "type": "signed-num", "targets": 3}
]
});
$('#example tfoot th').each(function() {
var title = $('#example thead th').eq($(this).index()).text();
console.log(title);
$(this).html('<input type="text" placeholder="Search ' + title + '"/>');
});
table.columns().every(function () {
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change', function() {
datatableColumn.search(this.value).draw();
});
});
} );
Attempting to use the Buttons extension, and not able to display the buttons, as per the documentation.
I've tried each of the methods, yet they are not showing.
Can you review my js on http://live.datatables.net/sojeluju/1/
Help show me what I'm missing.
$(document).ready( function () {
var table = $('#example').DataTable({
"sPaginationType" : "full_numbers",
"ajax": "/examples/server_side/scripts/server_processing.php",
"processing" : true,
"serverSide" : true,
"fixedHeader" : true,
"lengthMenu" : [[10, 25, 50, 100, 200, -1],[10,25,50,100, 200, "All"]],
"pageLength" : 25,
"sScrollX" : "110%",
"sScrollY" : "600px",
"bScrollCollapse": true,
"columnDefs": [
{ "type": "signed-num", "targets": 3}
],
dom: 'Bfrtip',
buttons: ['copy','excel','print']
});
$('#example tfoot th').each(function() {
var title = $('#example thead th').eq($(this).index()).text();
console.log(title);
$(this).html('<input type="text" placeholder="Search ' + title + '"/>');
});
table.columns().every(function () {
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change', function() {
datatableColumn.search(this.value).draw();
});
});
} );
Thank you,
Allan
I have my functional datatables when it is in high resolution, but when it is on a small screen it does not capture data from the server.
Large screen: https://i.stack.imgur.com/pGPA2.png
Small Screen: https://i.stack.imgur.com/ABQ74.png
As if not recognize each row correctly.
var table = $('#table').DataTable({
destroy: true,
filter: false,
processing: true,
serverSide: true,
autoWidth: true,
ajax: {
url: 'tabla/usuarios',
global: false,
method: 'POST',
data: function (d) {
d.campo = $('input[name=filter_campo]').val();
d.perfil = $('select[name=filter_perfil]').val();
d.estados = $('select[name=filter_estados]').val();
}
},
columns: [
{data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
return meta.row+1;
}
},
{data: 1},
{data: 2},
{data: 10},
{data: 11},
{data: 5,
render: function( data, type, full, meta ){
if (data) {
return '<input id="toggle" data-info="toggle'+full.id+'" name="my-checkbox" type="checkbox" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
}else {
return '<input id="toggle" data-info="toggle'+full.id+'" name="my-checkbox" type="checkbox" data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
}
}
},
{data: 9, searchable: false, orderable: false},
],
search: {
"regex": true
},
order: [[1, 'asc']],
fnDrawCallback: function() {
$("[name='my-checkbox']").bootstrapToggle();
$('[data-toggle="popover"]').popover({
placement : 'top',
html : true
});
}
});
var editar = function(tbody, table){
$(tbody).on("click","button.editar", function(){
var data = table.row($(this).parents("tr")).data();
$('#editar_id').val(data[0]);
$('#editar_alias').val(data[1]);
$('#editar_correo').val(data[2]);
$('#editar_perfil').val(data[8]);
$('#ModalEditar').modal('show');
$("#editar-alias").first().focus();
})
Note: in the responsive the property loses the button "switch".
I'm from venezuela, excuse my little English.
How could I solve it?
When the table is complete they are displayed correctly, but when they go to responsive they lose the property they have. The components are:
http://www.bootstraptoggle.com/
http://getbootstrap.com/javascript/#popovers-examples
var table = $('#table').DataTable({
destroy: true,
filter: false,
processing: true,
serverSide: true,
autoWidth: true,
ajax: {
url: 'tabla/usuarios',
global: false,
method: 'POST',
data: function (d) {
d.campo = $('input[name=filter_campo]').val();
d.perfil = $('select[name=filter_perfil]').val();
d.estados = $('select[name=filter_estados]').val();
}
},
columns: [
{data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
return meta.row+1;
}
},
{data: 1},
{data: 2},
{data: 10},
{data: 11},
{data: 5,
render: function( data, type, full, meta ){
if (data) {
return '';
}else {
return '';
}
}
},
{data: 9, searchable: false, orderable: false},
],
search: {
"regex": true
},
order: [[1, 'asc']],
fnDrawCallback: function() {
$("[name='my-checkbox']").bootstrapToggle();
$('[data-toggle="popover"]').popover({
placement : 'top',
html : true
});
},
language: {
"url": "js/idioma_espaniol_datatables.js"
}
}
});
I want to adapted the editor Modal style with some more classes and id, because I have some other modals the are already loaded in the html Form.
I read in the forum, that a possible way to change the modal ist $.fn.DataTable.Editor.display.bootstrap.node().
I tried with this example to add a class $.fn.DataTable.Editor.display.bootstrap.node('modal').addClass('id'); but I get always the error "Object doesn't support property or method 'addClass'"
the description about the node() did not help me to find my problem. Is there an example where I can understand what I do wrong? Maybe a hint what I should do?
Andreas
Hello,
is it possible to add a 2nd line with information to a row?
Thx for reply!
I'm getting this error when the no.of columns changes. I call the LoadGrid method with 3 columns first. It works perfectly fine but when I call it again with new Data (having only 2 columns/objects) it throws this error. Also it doesn't update column headers. Instead stick with the previous 3 columns. Is there something we need to do when no.of columns changes? Do we have to notify the dataTable? Please help
function LoadGrid(tableId, gridData) {
var pageCount = 0;
var columnKeys = [];
if (gridData != null) {
pageCount = gridData.length;
for (var k in gridData[0]) {
columnKeys.push({ "data": k });
}
$(tableId).dataTable().fnClearTable();
$(tableId).dataTable({
"autoWidth": false,
"fixedHeader": false,
"searching": true,
"pageLength": pageCount,
"bDestroy": true,
"bSort": false,
"scrollY": 450,
"scrollX": true,
data: gridData,
columns: columnKeys
});
}
}
Calling LoadGrid by passing the tableId
LoadGrid("#tblActivitySummary", object.ActivitySummary, false); // object.ActivitySummary length is 3
When I call it again with different data I get error
LoadGrid("#tblActivitySummary", object.ActivitySummary, false); //object.ActivitySummary length is 2
Cannot read property 'sWidth' of undefined
Hello,
Is it possible to use a HTML5 data attribute to hide a column? Perhaps something like this:
<thead>
<tr>
<th data-hide="true">Hide me!</th>
</tr>
</thead>
Thanks.
Regards.
How can I get the row number on a click on a field or row?