I am using the DataTables plugin on my table. An issue I am experiencing is I can drag and drop a table header to move the column to another position.
I want to disable this. I've been Googling and looking thrugh the docs but I cannot find an answer.
Here's my code
<script>
var oTable = $('#report_table').dataTable({
"paging" : false,
"sDom": 'RC<"clear">lfrtip',
"iDisplayLength": -1,
"aaSorting" : [],
"sPaginationType": "full_numbers",
"oLanguage": {
"sInfo": "" //Showing _START_ to _END_ of _TOTAL_ results
}
});
new FixedHeader(oTable);
</script>
Any ideas?
Solution was per #phillip100's comment:
Do you have dataTables.colReorder.js script included perhaps? If so, remove R letter from sDom option.
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.
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');
How do you remove the "Showing 1 of N entries" line of text on a dataTable (that is when using the javascript library dataTables? I think I was looking for something along these lines...
$('#example').dataTable({
"showNEntries" : false
});
Pretty sure this is a simple one, but cannot seem to find it in the docs.
You can remove it with the bInfo option (http://datatables.net/usage/features#bInfo)
$('#example').dataTable({
"bInfo" : false
});
Update:
Since Datatables 1.10.* this option can be used as info, bInfo still works in current nightly build (1.10.10).
try this for hide
$('#table_id').DataTable({
"info": false
});
and try this for change label
$('#table_id').DataTable({
"oLanguage": {
"sInfo" : "Showing _START_ to _END_ of _TOTAL_ entries",// text you want show for info section
},
});
If you also need to disable the drop-down (not to hide the text) then set the lengthChange option to false
$('#datatable').dataTable( {
"lengthChange": false
} );
Works for DataTables 1.10+
Read more in the official documentation
Now, this seems to work:
$('#example').DataTable({
"info": false
});
it hides that div, altogether
It is Work for me:
language:{"infoEmpty": "No records available",}
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;