I want to prevent two of my table's hidden columns from being toggled as visible when using ColVis, but I'm finding the column selector article a bit confusing and can't figure out how to do this.
I've added a className of "nonUser" to the two columns I want to remain permanently hidden but I don't know how to get ColVis to work on all columns except for those two.
Scenario:
What I have tried is to generate the idSrc (DT_RowId) and have an additional field (e.g. RecordId) that is the primary key for the database record. That works except when I try to delete a row, DataTables Editor sends the generated ids (from idSrc/DT_RowId), but I need to have the primary keys submitted. From looking at the DataTables Editor code, it does not appear there's anyway for me to tell DataTables Editor to send additional data (i.e. the primary keys) with the "remove" action.
How best to handle this situation? Have I missed something simple?
Cheers,
Steve
Hello, all. I'm the lead developer for an open source project ( Program O - https://github.com/Program-O/Program-O/ ), and I've made the switch for some of my project's admin pages from YUI to DataTables in order to display certain data from a MySQL database, and it all works as expected/intended, in all respects (search, sorting, pagination, etc.). This isn't where my problem is. I'm coming to it, trust me. 
As this is an open source project, and my current income is somewhat limited, I cannot afford the Editor plugin to allow users to make changes to the database entries, so I "rolled my own" editing script, and IT works as intended. My problem is loosely related to this, but again, isn't where my problem lies. Here's the scenario:
When a user (read: me, since this is still in Alpha testing) clicks on a cell to edit it, makes changes, and then "clicks off" to save the changes (which is working well), the draw() event triggers (as I think it should), but it goes back to the first entry of the current page. If the entry that was modified is among the first few entries, it's all good, since that entry is still within visual range. but if the modified entry is, say, the 16th entry of a page of 25, that entry is no longer visible, as it's "below the fold". This is a problem, as far as I'm concerned.
So the question is, when I initiate the draw() event after modifying some data, is there a way to pass the ID of the currently modified row as a new "starting point" for the "current" page? I've looked through the documentation, but didn't see anything specific to my needs. Of course, I may have missed something when I was looking, but...
Hello,
I want to integrate datatable in Codeigniter php framework. Is it possible?
Hi,
This is not a major issue, however I wonder if I'm doing something wrong... When the tables have no data on the initial request, the "No data available in table" message only shows in the first column... once the item has been refreshed (either by filter, or column click reorder), then the message appear across all columns...
Before refresh
After refresh
Hi, when using DataTables Buttons with collection under a modal screen (bootstrap), the collection buttons does not show (I believe it shows behind the screen).
Hey,
I'm using the extended colvis collection.
Is there any way to force at least one column to be selected at all times? i.e. If only 1 column is visible and the user tries to click it in order to hide it, it won't work. Is there any callback I can somehow make this check in, and return false when requesting to hide the only 1 visible column?
Also, similarly to colvisRestore, I need directions on how to add a hide/show all columns behavior to the top of the collection (with prefixButtons I guess), preferably in a single toggle button. Any directions?
I need to think of a way to make 'hide all' respect the at least 1 visible column at all times restriction I'm looking to implement. But I'm getting ahead of myself since I don't even know if all of this is possible.
Thanks.
Hi,
I'm following the examples that describes how to get extra details of a row when one of its cells is clicked:
https://datatables.net/examples/server_side/row_details.html
https://datatables.net/examples/api/row_details.html
I'm stuck trying to load another datatable as the extra details. I was thinking that I could firstly create an empty table for the row in question and after that call the function that makes the load of data:
$(function() {
var table = $('table#containers').DataTable( {
...
"ajax": {
"type": "GET",
"url": "/some/url/?" + $.param($('#form-filters').serializeArray()),
},
...
});
// Add event listener for opening and closing details
$('table#containers tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
var virtual_task_id = row.data()[0];
var subtable_id = "subtable-"+virtual_task_id;
row.child(format(subtable_id)).show(); /* HERE I format the new table */
tr.addClass('shown');
sub_DataTable(virtual_task_id, subtable_id); /*HERE I was expecting to load data*/
}
});
});
The format function that I have created just prints the structure of the table. It does what I expect:
function format ( table_id ) {
// `d` is the original data object for the row
return '<table id="'+table_id+'" class="display" border="0" style="padding-left:50px; width:100%;">'+
'<thead>'+
'<th>TaskId</th>'+
'<th>Name</th>'+
'<th>Creation</th>'+
'<th>State</th>'+
'<th>#Jobs</th>'+
'<th>#Finished</th>'+
'<th>#Produced</th>'+
'<th>#Consumed</th>'+
'</thead>'+
'</table>';
}
But I have some trouble understanding how to load data from the server and convert it to a datatable. I thought that calling my sub_DataTable function should do the trick, but in fact it doesn't. Trying my code, there is no call to the server to GET the data.
I see that sub_DataTable function is being called when I click on the cell. It shows or hides the table created by format function, and then it calls to sub_DataTable function, but sub_DataTable does not contact the server to get the data of the table. I'm quite newbie on JavaScript, jQuery and DataTables and probably I'm losing something obvious (sorry), but I don't see what. Here is my sub_DataTable function, which, I think, is the failing one:
function sub_DataTable(vtask_id, table_id) {
var subtable = $('table#table_id').DataTable({
"ajax": {
"type": "GET",
"url": "/other/url/"+vtask_id
}
});
}
Thanks!
I have a table in which one column has mixed values(text and numbers: {12AE15152}, {1531215}). My problem is that MS Excel formats number values as number(aligned on the right, and adds E+ for greater values) but i want it to be shown as simple text.
Here is what I have done so far:
var buttonCommon = {
exportOptions: {
trim: false,
format: {
body: function (data, column, row) {
// Strip $ from salary column to make it numeric
data = data.replace(/<span title=".+\">/, '');
data = data.replace(/<span class="fa fa-check text-success\">/, 'YES');
data = data.replace(/<span class="fa fa-minus text-danger\">/, 'NO');
data = data.replace(/<\/span>/, '');
return data.toString();
}
}
}
};
$("#userA_tbl").dataTable({
dom: 'Bfrtip',
buttons: [
$.extend(true, {}, buttonCommon, {
extend: 'excelHtml5',
title: '<fmt:message key="limit.change.history" />',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'}),
$.extend(true, {}, buttonCommon, {
extend: 'pdfHtml5',
title: '<fmt:message key="limit.change.history" />',
orientation: 'landscape',
pageSize: 'A3',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
})
],
"columnDefs": [
{"type": "html", "targets": "_all"}
]
});
Can't seem to get touchscreen keyboards to activate with an editor keytable, tried with Android/Chrome, IOS/Safari and MS SurfacePro3/Firefox , no joy with any. Other editor forms (main and popup) work fine. Is there a trick to this I'm missing? Googled around for awhile thinking there should be a easy answer but didn't come up with one.
I am new in this world , but I look that you have wonderful features here, can you please publish a full post
of this specific example: "https://editor.datatables.net/examples/simple/simple.html" using ASP.NET MVC WITH SQLSERVER.
I would really appreaciate your time and help, I strongly need it ....
Hey,
Docs specify that buttons.buttons.text can be handed a callback through which we can access dt.i18n(), but unfortunately buttons.buttons.titleAttr accepts only a string, so there's no way (that I know of) to use i18n() with it.
Any plans for this? Or things I might've missed?
Thanks.
Hello,
I would like to have two row in my header.
One for filtering and another one for sorting columns.
You can find an working example here : https://jsfiddle.net/0hoxy40o/
In this example, it works quite well but as you can see, input text in header (the second line) are not correctly hidden with responsive whereas header columns in the first one are correctly hidden.
I have tried to invert the header row but there is always the same behavior.
Is it a bug?
Do you have an idea how I can do it?
Thanks in advance and have a nice day.
Lolo.
Hi im using datatables 1.10
i want to show sum of current page and total pages for my serverside datatable
i use sum plugin like this
$('#mytable').DataTable({
processing: true,
serverSide: true,
stateSave: true,
ajax: 'stock/data-json',
"fnDrawCallback": function() {
var api = this.api();
// Total over all pages
var total = api.column(4).data().sum();
// Total over this page
var pageTotal = api.column(4, {page:'current'}).data().sum();
$(api.column(4).footer()).html(pageTotal + ' ( ' + total + ' total)');
}
});
the page total shows correct BUT the sum total pages show also the current page not the total !!!
and this is bacause the data is serverside processed so it ca not see the other records
now how i can get the total of all records in serverside datatable ?
thanks in advance.
Here's a fiddle which illustrates the problem: https://jsfiddle.net/ujj3zkdq/
How can I create a form filter in Data Table and it should also work in ajax as well?
I have tried below code but its not working
[code]
<input type="text" name="subject" id="subject"/>
[/code]
I'm using the new DataTables with the Select module and ajax automatic reloading.
select: { style: "single" },
The question is:
How to prevent a row from being deselected when the user clicks on a selected row again?
Yes, I googled a lot (thanks Flying Spaghetti Monster it's Friday and I had time to uselessly bang my head against the wall). Somewhere on this forum a developer from the DataTables team told he or she might implement some sort of "preSelect" event hook later, but it's hasn't been done yet. I don't really want to edit the DataTables source code of my project in order not to turn the later upgrades into a nightmare. Hopefully my humble post doesn't look arrogant, but I think such functionality should be standard.
Yes, I already tried all kind of things (found a lot of examples here and in the internet). I was pragmatically selecting and deselecting rows when catching the 'select' and 'deselect' events, but it doesn't work properly with the ajax' auto-reload feature ( table.ajax.reload(null, false); ) as it's keeping only the last selected raw thanks to the rowId option passed to DataTables initialisation, even if I use the nice way of selecting the row with table.row(index).select() function; It's important to let the developer check the events BEFORE they would be fired in order to decide if they would to be fired or not, and not just afterwards.
Eventually I solved this problem with using the select: { style: 'api ' } option instead of the select: { style: 'single' } option, and it even works properly with the ajax reloading feature and Select's rowId option, but... we can do it better than that, right?
The final solution I implemented:
table = $("#table-list").DataTable({
[...]
ajax: 'http://website.com/path',
[...]
s̶e̶l̶e̶c̶t̶:̶ ̶{̶ ̶s̶t̶y̶l̶e̶:̶ ̶"̶s̶i̶n̶g̶l̶e̶"̶ ̶}̶,̶
select: { style: 'api' },
[...]
});
$("#table-list tbody").on("mousedown", "tr", function(event) {
[...]
// Getting the row index:
var index = table.row(this).index();
[...]
// Selecting the row pragmatically:
table.row(index).select(index);
[...]
// De-selecting the row pragmatically:
table.row(index).deselect(index);
[...]
// Getting row data (for example, in order to check row validity etc
var data = table.row(this).data();
console.log(data.row_id);
console.log(data.firstname);
console.log(data.lastname);
[...]
});
Thanks for a great DataTables project though, overall I liked it a lot, 5/5.
Hi there,
I have a submit button that I would like to act as a filter to help filter down results to speed up loading.
The theory is that if a user types "Tucker", then the next page will load "Tucker" in the searchbox and the searches with "Tucker" in the results will be retrieved. However, should "Tucker" be deleted, then the entire list should be revealed and/or loaded.
I know it ought to be possible, so if anyone can point me in the right direction I would be grateful.
Cheers,
TM
Hi.,
I am trying real hard for the past two days to refresh the tabledata after editing it.,
One of my column has a link which open a bootstrap modal , there you can edit the data and hit submit which will do the Ajax call and the DB is getting updated I want to refresh the data in Ajax success.
If I use the below code it gives me this error -- https://datatables.net/manual/tech-notes/4
table.ajax.url( 'ajaxurllink' ).load();
table.draw();
===
If I use lot of other techniques but not successful the various error are
Cannot read property 'aoData' of null
used this function
function RefreshTable(tableId, urlData)
{
$.getJSON(urlData, null, function( json )
{
table = $(tableId).dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
for (var i=0; i<json.data.length; i++)
{
table.oApi._fnAddData(oSettings, json.data[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
table.fnDraw();
});
}
My json is well formed too as show below:
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
]
]
}
Please help !!
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Hello,
I'm adding rows to my datatable using Ajax like this :
$.ajax({
type : 'GET',
url: 'scripts/mds.php',
data: "operation=list",
dataType: 'json',
success: function(response)
{
Table.clear();
var btn="<button type='button' id='askbutton' class='btn btn-block btn-primary'>ASK</button>";
$.each(response, function(idx, obj) {
Table.row.add([ obj["id"],
obj["name"],
btn]);
});
Table.draw();
},
error: function(xhr, status, error) {
console.log("error :"+xhr.responseText);
}
});
It works perfectly : a button is added to each line. But now, when a button is fired, I would like to make a call to some PHP function and pass some arguments (like obj["id"]) to identify the clicked button, and then replace the clicked button by a text which would show if the PHP function worked or if an error occured...
How can I achieve this ? Could you please help me ?
Many thanks in advance !
T.