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.
Related
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,
} );
I have a data table and I have one editable column int it. When I edit that column (make some value change), on click of a button outside the table I would like to collect the edited rows with newly entered data.
Can anyone pls help.
I have tried this
$('#dataTableId tbody').on( 'change', 'tr', function () {
alert( table.row( this ).data() );
} );
But the above is not showing the edited data
Here is my data table:
function createDataTable(tableData){
var table = $('#dataTableId').DataTable({
responsive: true,
searching: false,
select: true,
"stripeClasses": [ 'odd', 'even'],
paging: false,
info: false,
data: tableData,
'columnDefs': [{
/* width: '20%', targets: 0, */
'targets': 0,
'searchable': false,
'orderable': false,
'checkboxes': {
'selectRow': true
},
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
},
{
"targets": 3 ,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="text" name="id[]">';
}
}
],
dom: '1Bfrtip',
select: {
style: 'multi'//,//os
//selector: 'td:first-child'
},
destroy: true,
'order': [[1, 'asc']],
"columns": [
{"title":"",
targets: 0,
data: null,
defaultContent: '',
"className": "dt-center1 dt-center2 dt-ownershipColor dt-checkboxes-cell",
orderable: false
},
{ "title":"BusinessName",
"className": "dt-center1 dt-center3 dt-ownershipColor hidden-xs",
},
{ "title":"Alternate1 ",
"className": "dt-center1 dt-center2 dt-ownershipColor hidden-xs",
},
{ "title":"Alternate2",
"className": "dt-center1 dt-center2 dt-ownershipColor hidden-xs",
}
],
} );
$('#dataTableId tbody').on('change', 'input[type="checkbox"]', function() {
$(this).parent().parent().toggleClass('selected');
$(this).parent().parent().edit();
} );
$("#Deletebtn").click(function(){
var table = $('#dataTableId').DataTable();
var rowData = table.rows('.selected').data().toArray();
alert(rowData);
});
$("#Updatebtn").click(function(){
var table = $('#dataTableId').DataTable();
var rowData = table.rows('.selected').data().toArray();
alert(rowData);
});
$('#dataTableId tbody').on( 'change', 'tr', function () {
alert( table.row( this ).data() );
} );
}
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
I am trying to get rows from back-end response on each scroll. I get
an AJAX response, but I can't get full row, it eats up the data
most probably the last one.
I tried with so other alternative, but it's not working at all, I tried redraw and reload in AJAX.
Here goes my js code:
var table= $('#subscriber_list').DataTable({
responsive: true,
"processing":true,
serverSide: true,
"scrollCollapse":true,
"sDom":"BifrtS",
scrollY:'35vh',
scrollCollapse: true,
paging:false,
"oScroller": {
"displayBuffer": 2,"loadingIndicator": true
},
"ajax": {"url": $('#data_table_column_list').attr("url"),"type": 'POST',"data":{'type':subscriber_type,'end_date_from':end_date_from,'end_date_to':end_date_to}},
"columns": JSON.parse($('#data_table_column_list').val().replace(/\'/g, '"')),
"columnDefs": [
{ "orderable": false, "targets": 2 }
],
buttons: [
{
extend: 'excelHtml5',
text: 'Export selected',
exportOptions: {
columns: ':visible:not(.not-exported)',
modifier: {
selected: true
}
},
title: 'Data export'
},
{
extend: 'excelHtml5',
text: 'Export All',
exportOptions: {
columns: ':visible:not(.not-exported)'
},
title: 'Data export'
}
]
});
You need one or both of the following depending on how you want the table to work.
Right now, it's getting cut off because the default in Datatables is 10 rows. You have paging set to false, so any results after the 10th are now shown.
Either switch this: paging:false,
to: paging:true,
That'll give you multiple pages of results with 10 on each page.
You can also add "pageLength": 50 or some other value if you want more than 10 rows per page.
here i am using same data table from multiple radio button switch, on switching i get warning from data table can't be re-initialised , since i know when i use table.destroy(); it destroy's all the object's created at while i switch the options, but have alternate to use it , what to do now ???? , running out of idea
i was referring this actually
https://datatables.net/manual/tech-notes/3
$('.subscriber_type').on('change',function (e){
var table = $('#subscriber_list').DataTable();
subscriber_data_table($(this).val(),$('#datepicker_from').val(),$('#datepicker_to').val());
});
subscriber_data_table("all",null,null);
function subscriber_data_table(subscriber_type,end_date_from,end_date_to) {
$('#subscriber_list').DataTable({
responsive: true,
"processing": true,
serverSide: true,
paging:true,
"pageLength":50,
"drawCallback": function( settings ) {
console.log( 'hit began' );
},
"sScrollY": "379",
"sDom":"BifrtS",
"oScroller": {
"displayBuffer": 2,"loadingIndicator": true
},
"ajax": {"url": $('#data_table_column_list').attr("url"),"type": 'POST',"data":{'type':subscriber_type,'end_date_from':end_date_from,'end_date_to':end_date_to}},
"columns": JSON.parse($('#data_table_column_list').val().replace(/\'/g, '"')),
"columnDefs": [
{ "orderable": false, "targets": 2 }
],
buttons: [
{
extend: 'excelHtml5',
text: 'Export selected',
exportOptions: {
columns: ':visible:not(.not-exported)',
modifier: {
selected: true
}
},
title: 'Data export'
},
{
extend: 'excelHtml5',
text: 'Export All',
exportOptions: {
columns: ':visible:not(.not-exported)'
},
title: 'Data export'
}
]
});
}