Is it possible in DataTables in mobile view set the table to horizontal scroll instead of "responsive" table which collapse the table?
actually my datatables looks like this in mobile:
and in expanded state it is so ugly as i have some buttons in last column so i would know if there is a way to make the table "full width" and just to see the other columns the user will have to scroll horizontally in that card..
Here is my datatable config
$('#table').DataTable({
responsive: true,
destroy: true,
data: dati,
select: false,
ordering: false,
lengthChange: false,
pageLength: 5,
info: false,
pagingType: "numbers",
dom: 'B<t><p>',
columns: [
{
data: 'DATA',
render: data => {
return moment(data).format('DD/MM/YYYY');
}
},
{ data: 'ORA' },
{ data: 'OPERATORE' },
{ data: 'OPERAZIONE' },
{
data: 'IMPORTO',
render: data => {
return '€' + data.toFixed(2)
}
},
{
data: null,
defaultContent: ''
}
],
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'csv',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'excel',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'pdf',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'print',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
}
],
initComplete: function () {
var $buttons = $('.dt-buttons').hide();
$("#export_type").on("click", "a", function (event) {
event.preventDefault();
var btnClass = $(this).attr("data-export")
? '.buttons-' + $(this).attr("data-export")
: null;
if (btnClass) $buttons.find(btnClass).click();
});
}
});
Actually i've yet tryed to set responsive to false and by setting scrollX to true, in mobile it's look "okay" but in web without responsive tag set to true it doesn't take full width and when the screen is resized it "breaks"
You can use an object as the "responsive" setting to evaluate what the screen size is, so that you can set "responsive" to be false if the screen size is below a certain width.
For example:
const isLargerThanMobileScreen = ($(window).width() > 480) ? true : false;
$('#table').DataTable( {
"scrollX": true,
"responsive": isLargerThanMobileScreen,
} );
Related
I am trying to get data from .JSON file and filter it in realtime.
But I am getting Warnings as
DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
As per instructions in above link I added retrieve: true, and paging: false, But still warnings are shown.
I am new for jscript and jquery so can you please help me to resolve this warning
main.js file
$(document).ready(function () {
var table = $('#example').DataTable({
retrieve: true,
paging: false,
ajax: {
url: './test.json',
dataSrc: '',
},
columns: [
{ data: 'Host' },
{ data: 'Category' },
{ data: 'Type' },
{ data: 'SSH' },
{ data: 'Status' },
{ data: 'Notes' },
],
mark: true,
dom: 'Bfrtip',
lengthMenu: [
[10, 25, 50, 100, -1],
['10 rows', '25 rows', '50 rows', '100 rows', 'Show All']
],
buttons: [
'pageLength',
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csvHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
download: 'open',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
columDefs: [{
targets: -1,
visible: false
}],
});
$('#example tfoot th').each(function () {
var title = $('#example tfoot th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
table.columns().eq(0).each(function (colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
I am trying to make a js datatable that has a column called 'Audio', which right now does not utilize space very well:
I'm trying to change it so that the Audio column is only as wide as its widest text element, basically so it has no blank space:
I've tried manually setting the max-width but it hasn't made any difference, and I've explored some datatables options but with no luck so far
https://jsfiddle.net/1mzqf23w/
$(document).ready(function() {
var data = JSON.parse('[{"itemId":1,"audio":"01 Hey DJ.flac","format":"flac","length":"00:03:27","audioFilepath":"C:\Users\marti\Documents\ous supreme team - (1986) rappin\Hey DJ.flac","trackNum":1,"album":"Rappin","year":1986,"artist":"Worlds Famous Supreme Team"}, {"itemId":2,"audio":"02 Wow Dude DJ.flac","format":"flac","length":"00:03:27","audioFilepath":"C:\Users\marti\Documents\ous supreme team - (1986) rappin\Hey DJ.flac","trackNum":1,"album":"Rappin","year":1986,"artist":"Worlds Famous Supreme Team"}]')
//setup table
var reorder = false;
var searched = false;
var origIndexes = [];
var origSeq = [];
var origNim = [];
let tableId = `#1_table`;
//create table
var table = $(tableId).DataTable({
"autoWidth": true,
"pageLength": 5000,
select: {
style: 'multi',
selector: 'td:nth-child(2)'
},
columns: [
{ "data": "sequence" },
{ "data": "#" },
{ "data": "selectAll" },
{ "data": "audio" },
{ "data": "length" },
{ "data": "audioFilepath" },
{ "data": "trackNum" },
{ "data": "album" },
{ "data": "year" },
{ "data": "artist" },
//{ "data": "imgSelection" },
],
columnDefs: [
{ //invisible sequence num
searchable: false,
orderable: false,
visible: false,
targets: 0,
},
{ //visible sequence num
searchable: false,
orderable: false,
targets: 1,
},
{//select all checkbox
"className": 'selectall-checkbox',
"className": "text-center",
searchable: false,
orderable: false,
targets: 2,
},
{//audio filename
targets: 3,
type: "natural"
},
/*
{//audio format
targets: 4,
type: "string"
},
*/
{ //audio file length
targets: 4,
type: "string"
},
/*
{ //video output format
targets: 6,
type: "string",
orderable: false
},
*/
{//audioFilepath
targets: 5,
visible: false,
},
{//trackNum
targets: 6,
visible: true,
orderable: true,
},
{//album
targets: 7,
visible: true,
orderable: true,
},
{//year
targets: 8,
visible: true,
orderable: true,
},
{//artist
targets: 9,
visible: true,
orderable: true,
},
/*
{ //image selection
targets: 7,
type: "string",
orderable: false,
className: 'text-left'
},
*/
],
"language": {
"emptyTable": "No files in this upload"
},
dom: 'rt',
rowReorder: {
dataSrc: 'sequence',
},
});
//add dataset to table
var count = 1;
data.forEach(function (i) {
table.row.add({
"sequence": i.itemId,
"#": `<div style='cursor: pointer;'><i class="fa fa-bars"></i> ${count}</div>`,
"selectAll": '<input type="checkbox">',
"audio": i.audio,
"length": i.length,
//"outputFormat": i.vidFormatSelection,
//"outputLocation": "temp output location",
"audioFilepath": i.audioFilepath,
"trackNum": i.trackNum,
"album": i.album,
"year": i.year,
"artist": i.artist,
//"imgSelection": i.imgSelection,
}).node().id = 'rowBrowseId' + i.sampleItemId;
count++;
});
//draw table
table.draw();
} );
If you are able to use css then try:
{//audio filename
targets: 3,
type: "natural",
className: 'track-name'
},
.track-name {
width: 0 !important;
white-space: nowrap;
}
I am using datatable but by default it shows top 10 rows, to see other rows you have to click on buttons at bottom to show other rows. I tried pagelength(), page.len(), "lengthChange": false etc but nothing work for me.
<script>
$(document).ready(function() {
var handleDataTableButtons = function() {
if ($("#datatable-buttons").length) {
$("#datatable-buttons").DataTable({
dom: "Bfrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm"
},
{
extend: "excel",
className: "btn-sm"
},
{
extend: "pdfHtml5",
className: "btn-sm"
},
{
extend: "print",
className: "btn-sm"
},
],
responsive: true
});
}
};
TableManageButtons = function() {
"use strict";
return {
init: function() {
handleDataTableButtons();
}
};
}();
$('#datatable').dataTable();
$('#datatable-keytable').DataTable({
keys: true
});
$('#datatable-responsive').DataTable();
$('#datatable-scroller').DataTable({
ajax: "js/datatables/json/scroller-demo.json",
deferRender: true,
scrollY: 380,
scrollCollapse: true,
scroller: true
});
$('#datatable-fixed-header').DataTable({
fixedHeader: true
});
var $datatable = $('#datatable-checkbox');
$datatable.dataTable({
'order': [[ 1, 'asc' ]],
'columnDefs': [
{ orderable: false, targets: [0] }
]
});
$datatable.DataTable( {
order: [[2, 'asc']],
rowGroup: {
dataSrc: 2
}
} );
$datatable.on('draw.dt', function() {
$('input').iCheck({
checkboxClass: 'icheckbox_flat-green'
});
});
TableManageButtons.init();
});
</script>
Other features of datatable working perfectly only SHOW 10,20,50,100 option does not appear on the top of the table. so user can select number of rows he want to see on same page.
I am currently maintenance on some project using Datatables:
I found a problem when export the column that is successfully displayed on page failed to display after use render as below :
this._dataTable = this.$mainTable.DataTable({
ajax: {
url: this.url,
dataSrc: ''
},
dom: 'Bfrtip',
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
orderable: false,
rowId: 'fsId',
scrollX: true,
scrollCollapse: true,
columns: [{
className: 'input-cell',
data: 'stadate',
render(data) {
const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';
return time;
},
width: '100px'
},
{
className: 'input-cell',
data: 'slotTime',
render(data) {
const time = data ? moment(data).format('HH:mm') : '';
return `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
},
width: '72px'
},
],
buttons: [{
extend: 'print',
customize: function(win) {
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}]
});
Data in column stadate can be displayed successfully, both on webpage and export page, but data slotTime successfully displays on webpage only.
Appreciate for any solution to fix it.. regards
finally, I can found sollution from here Datatables - Export values inside and outside the field input and value of the select field and here my final code :
this._dataTable = this.$mainTable.DataTable({
ajax: {
url: this.url,
dataSrc: ''
},
dom: 'Bfrtip',
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
orderable: false,
rowId: 'fsId',
scrollX: true,
scrollCollapse: true,
columns: [{
className: 'input-cell',
data: 'stadate',
render(data) {
const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';
return time;
},
width: '100px'
},
{
className: 'input-cell',
data: 'slotTime',
render: function (data, type, row) {
const time = data ? moment(data).format('HH:mm') : '';
return type === 'export' ? time : `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
},
width: '72px'
},
],
buttons: [{
extend: 'print',
exportOptions : {
orthogonal: 'export',
},
}]
});
thx all
I am using a databales javascript in my web site, with html5 buttons
https://datatables.net/extensions/buttons/examples/html5/simple.html , is working fine, but now I want to allow resize on fly the columns of the datatables , so I found this http://legacy.datatables.net/extras/thirdparty/ColReorderWithResize/
But the problem now is, I don´t know how to use both together.
myApp.table = $('#TableId').DataTable(
{
rowReorder: { update: false },
columnDefs: [
{ "width": "5%", "targets": [0] },
{ "className": "text-left custom-middle-align", "targets": [0, 1, 2] },
{ orderable: true, className: 'reorder', targets: 0 },
{ orderable: false, targets: '_all' }
],
autoWidth: false,
sDom: "Rlfrtip", //--> here is the code to resize columns
dom: '<"html5buttons"B>lTfgitp', // here the code to see the buttons
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel', title: 'ExampleFile' },
{ extend: 'pdf', title: 'ExampleFile' },
{
extend: 'print',
customize: function (win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
In fact I don´t understand well the code used by datatables Rlfrtip and B>ltfgitp
Thanks in advance.
Jolynice