I am using datatables:
$('#purForm').dataTable({
"bRetrieve": true,
"bJQueryUI": true,
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"bPaginate": false,
"bAutoWidth": false,
"bFilter": false
});
and for making it editable I am using datatables editable plugin:
http://code.google.com/p/jquery-datatables-editable/wiki/EditCell
How it only works when I click on the row's cell. Can I programmatically tell it which row to edit eg. based on some row index of table etc?
I'm guessing that it should be as simple as triggering a click on a table cell.
eg:
//first, specify a table cell (as appropriate to your application)
var $row = $("#myTable tr").eq(2);//third row
var $cell = $row.find("td").eq(1);//second cell
//then trigger a click
$cell.trigger('click');
If I'm right, then the cell will now be in edit mode, ready to accept keyboard input.
Related
I am ordering the column headers when the data table loads through the colReorder attribute.
var table = $("table#"+id+".data-table").DataTable({
"pagingType": "full_numbers",
"pageLength": 25,
"aaSorting": [],
"colReorder": true,
"colReorder": {
"order": gon.table_ids[id].order
},
"responsive": true});
However, I don't want the user to have the ability to move the columns around. I just want the datatable to load my predefined column order and that is it. Currently, after datatables moves my columns around, the user is allowed to move the columns but I want it disabled. Anyway this is possible?
I'm trying to draw a table with datatables 1.9.4, but the header and body are misaligned. This is my first work with this wonderful tool, and because this I don't know where to start.
I have a template in my aplication where I need to display the table, and I can't change this display.
Below, in the link we have an example with the table inside the template.
Jsfiddle
$(function(){
var dt = $('#tabelainfo').dataTable( {
"sDom": "Rlfrtip",
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
});
});
Thanks.
Your issue looks to be that you've manually added all the extra html markup that dataTables will add itself - either that or your jsfiddle has the table html from after the table was initialized, which won't help people troubleshoot your problem.
Just started using DataTables.js the other day and I'm wondering if you can give specific elements on the table custom id/class/name values. For example I've changed the text on the "Search" feature at the top of the table, however now I'd like to give the input box a specific id.
Here is my current attempt.
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});
$.fn.dataTableExt.oJUIClasses["sFilter"] = "my-style-class";
Rendered HTML
$('#thetable_filter input').attr('id', 'myId');
Alright Ill try to be as articulate as I can. I am using dataTables 1.9.4 and I am working with a table that I would like to have be a specific height, in this table I have 5 columns 2 of which are hidden columns, while the other 3 are visible.
That said in one of the 3 columns I two div elements one that is just plain text version of what I want users to be able to edit. Where when they click on that name/title to edit it, that div hides and the other one in the same column shows. The one showing has an input element and a link that says cancel. If cancel is clicked then the reverse happens the now hidden shows and the visible hides.
Everything works as expected so no real problems with any of that. The problem is it appears something to do with one or more of the following being set in the datatables api.
sScrollY, bAutoWidth, and a maybe a few others. cause the columns to resize when i hide/show the divs respectively in any given row, if the overall data in the column is larger than what was originally there hiding. Either way I have found that setting sScrollY is the main culprit if I let the table just be whatever size it wants to be height wise. Then the table won't try to auto correct its width per column every "re-draw"
Or I could remove the input field, though that goes against the spec of whats wanted/needed.
So my overall question is, after trying to set/unset, play with and tweak each setting of the api I use for this table. Is, is there anything.. I can do to keep the height set for the overall table while offering an inline element?
var oTable = $('#the_table').dataTable({
//"sPaginationType": "full_numbers",
"bPaginate": false,
"bFilter": false,
"bAutoWidth": false,
//"sScrollY": "200px",
"bScrollCollapse": true,
"aaSorting": [[1,'desc'],[0,'desc']],
"oLanguage": {
//"sInfo": 'Tasks: _END_',
//"sInfoEmpty": 'No Job/Task(s).',
"sInfo": '',
"sInfoEmpty": '',
"sEmptyTable": ' ',
},
"aoColumns": [
{ "bSortable": true, "bVisible": false, "iDataSort": 0, "aTargets": [ 2 ]},
{ "bSortable": true, "bVisible": false},
{ "bSortable": false, "sWidth":"67%", "sClass":"hide_overflow"},
{ "bSortable": false, "sWidth":"30%"},
{ "bSortable": false, "sWidth":"3%", "sClass":"rgt"}
]
});
return oTable;
I use grid with DataTables component.
I want to switch between two grid.
the second one is hidden at startup.
when I show the hidden grid, columns headers are not aligned with columns values
like this
you can see here in live
you can change the showed grid with radio at the top
an idea ?
An idea which correct your display error but which is not really attractive :
The idea is that your display became correct after sorting of a column so you can bypass it by adding myTable.fnSort([[0, 'asc']]); (sort first column by ascending order) after your datatable is initialized.
See here
A little more information would be helpful, but your jquery is not formatting your headers. show some more code or format them manually or get jquery to quit being that way. possibly a way to trick jquery would be to have those headers visible the whole time, but have your text font equal to your background and change the font color when it comes time
jQuery DataTables does not properly align columns and headers when the table is hidden. Temporarily show the table while applying dataTables to it:
$(document).ready(function() {
Table1 = $('#Table1').dataTable({
"bSort": false,
"sScrollY": "400px",
"bJQueryUI": true,
"bPaginate": false
});
$('#Table1Container').hide();
$('#Table2Container').show();
Table2 = $('#Table2').dataTable({
"bSort": false,
"sScrollY": "400px",
"bJQueryUI": true,
"bPaginate": false
});
$('#Table2Container').hide();
$('#Table1Container').show();
$("#rdTable1").click(function() {
$('#Table2Container').hide();
$('#Table1Container').show();
});
$("#rdTable2").click(function() {
$('#Table1Container').hide();
$('#Table2Container').show();
});
});
Since DataTables 1.10, this issue can be resolved by calling the columns.adjust() method when you show your table.