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?
Related
'bAutoWidth : false' , is not working when dataTable.bootstrap.js is included in the webpage. I need dataTable.bootstrap.js in my page for design. How to resolve this?
$('#table').DataTable({
"bAutoWidth": false,
"columnDefs": [{
"targets": [-1],
"orderable": false
}]
});
Using autoWidth: false only makes sense when you're setting your own column width with columns.width option or via HTML/CSS.
Also you're using words with no spaces which affects the width of all columns. Using table-layout: fixed on the table may help.
See this example for code and demonstration.
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;
is there a way to iniate a table with dataTable paginating beaultiful as it always does,
and then after the dom is loaded, trigger an event (click for isntance) and remove the paginate? In other words, put all the records in the table again.
UPDATED
$('.dynamicTable').dataTable({
"sPaginationType": "bootstrap",
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});
i have this code above, with 120 rows coming from my php. Naturally the dataTable paginate it every 10 rows, so 12 pages. I want to iniate my DOM with dataTable paginating normally, but then, after i click in a button, it disable dataTable's paginate; in other words, show all my records in 'one page'. I am not sure i have described it well, anybody can understand me? hehe Thanks.
two methods will help in showing all records in datatables:
iDisplayLength is the initial legth shown on the datatable
aLengthMenu is the choices that a user can have in the show [#] entries menu item
so for your code add these to have an initial display length of 15, with options of 15, 25, 50 or All entires
$('.dynamicTable').dataTable({
"sPaginationType": "bootstrap",
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"iDisplayLength": 15,
"aLengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]]
});
play with the numbers to your application needs to see what works best
aLengthMenu documentation http://www.datatables.net/examples/advanced_init/length_menu.html
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.
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.