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'
}
]
});
}
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 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.
here we are not using any ajax calls just binding a json object to the datatable
below is the code i'm using
$(".loading").show();
$('#myTable').DataTable().destroy();
var dataTable = $('#myTable').DataTable({
data: passeddata,
dom: 'lBfrtip',
buttons: [{ extend: 'excel', text: 'Export to Excel', filename: 'Global Credit Analysis Report' }],
"lengthMenu": [[100, 200, 300, 500], [100, 200, 300, 500]],
deferRender: true,
"scrollY": '60vh',
"scrollX": true,
order: [[6, 'asc']],
columns: [
{ "data": "GFS_x0020_Region","defaultContent": "" },
{ "data": "Focal_x0020_Point_x0020_of_x0020.Title","defaultContent": ""},
{ "data": "Preparer_x0020_Email.Title","defaultContent": ""},
{ "data": "RequesterFullName","defaultContent": "" },
{ "data": "RequestorsOrganization","defaultContent": "" }
]
});
dataTable.columns.adjust();
$(".loading").hide();
there is a complete callback of datatable
$('#myTable').dataTable( {
. . .
"initComplete": function( settings, json ) {
$('.loading').hide();
}
} );
The issue is datatable takes time to load everything, but the code is executed already, so your loading appears and then disappear quickly.
You could use wait or delay but thats not ideal.
I am using ajax datatable for showing data. I am having issue with the export button. What by default is happening is on click of button it is only exporting visible data but what i actually want is it should be exporting all the data (if filtered then that too).
Tried various export options as
dom: 'lfBrtip',
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'csv',
exportOptions: {
modifier: {
search: 'applied',
order: 'applied',
page: 'all'
}
}
},
{
extend: 'excel',
exportOptions: {
modifier: {
search: 'applied',
order: 'applied',
page: 'all'
}
}
},
'colvis'
],
But none of them seems to be working. Any help ??
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