I'm trying to visualize the pdf of almost all the datatable's columns, however, the pdf document does not show the last two columns. Having said that, I have two questions. First how can I make the column "Opciones" not to appear, and the second is, how can I make the pdf to show complete? I would appreciate any help. Thanks
This is my code:
function listar() {
tabla = $('#tbllistado').dataTable({
"aProcessing": true,//activamos el procedimiento del datatable
"aServerSide": true,//paginacion y filrado realizados por el server
dom: 'Bfrtip',//definimos los elementos del control de la tabla
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdf'
],
"ajax":
{
url: '../ajax/venta.php?op=listar',
type: "get",
dataType: "json",
error: function (e) {
console.log(e.responseText);
}
},
"bDestroy": true,
"iDisplayLength": 5,//paginacion
"order": [[0, "desc"]]//ordenar (columna, orden)
}).DataTable();
}
and the images of the results
enter image description here
And also this is the pdf
enter image description here
I figure it out by myself, all I had to do was to add some parameters to the pdf button. Thank you so much
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
{
extend: 'pdf',
orientation: 'landscape',
exportOptions: {
columns: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
}
]
Related
I have a requirement to display a table, with all CRUD operations.
I am using DataTables for the first time. I have gone through so many post but people have used PHP, and I have no idea about PHP. I am just simply using Datatables with JS.
Please tell me If I am going in any wrong direction.
Anyway, here is the error I am getting.
My code is working fine, I am able to fetch Data. But I want to use inbuilt edit delete feature of Data tables.
Here is my Data table:
$('#table').DataTable(
{
data: userArray,
"lengthMenu": [[5, 10, 15, 20, -1], [5, 10, 15, 20, "All"]],
"pageLength": 10,
select:true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
columns: [
{ title: ' User ID' },
{ title: "firstName" },
{ title: 'Last Name' },
{ title: "Email" },
],
});
This is the error:
Uncaught (in promise) Cannot extend unknown button type: create
script-
I'm working on angular project and I'm sorting my data into a datatable, it's initialized in a js file like that :
$(function () {
$('#sorting-table').DataTable({
"language": {
"lengthMenu": "Afficher _MENU_ par page",
"zeroRecords": "Nothing found - sorry",
"info": "Page _PAGE_ de _PAGES_",
"infoEmpty": "Aucun résultat trouvé",
"zeroRecords": "Rien trouvé - Désolé",
"search": "Chercher",
"infoFiltered": "(total: _MAX_ )",
"paginate": {
"previous": "Précédent",
"next": "Suivant"
}
},
"lengthMenu": [
[5, 10, 15, -1],
[5, 10, 15, "Tous"]
],
"order": [
[0, "desc"]
],
dom: 'lBfrtip',
buttons: {
buttons: [{
attr: { id: 'printButton' },
extend: 'print',
text: '<i class="la la-print"></i>',
title: $('h1').text(),
exportOptions: {
columns: [ 0, 1, 2, 3]
},
footer: true,
autoPrint: true,
}],
dom: {
container: {
className: 'dt-buttons'
},
button: {
className: ''
}
}
}
});
});
})(jQuery);
On a component that my table is sorted I want to work with angular ngx-translation, if the current language change I want to change the language of my data table !
ngOnInit() {
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
if (this.translate.currentLang === 'ar') {
$('#sorting-table').DataTable({
language: {
url: 'cdn.datatables.net/plug-ins/1.10.20/i18n/Arabic.json'
}
});
}
})
}
I got this error :
DataTables warning: table id=sorting-table - Cannot reinitialise
DataTable. For more information about this error, please see
http://datatables.net/tn/3
url should be like this : //cdn.datatables.net/plug-ins/1.10.20
and add destroy:true
i'm using DataTable and now after some work my table has a double datatable info showing as :
Showing 1 to 10 of 385 entries
Showing 1 to 10 of 385 entries
And i don't know how it is happening, in the inspect mode i have :
<div class="dataTables_info" id="tableResult_info" role="status" aria-live="polite">Showing 1 to 10 of 385 entries</div>
<div class="dataTables_info">Showing 1 to 10 of 385 entries</div>
My table is initialized like this :
let matable = $('#tableResult').DataTable({
data: newData,
dom: 'Blfrtipi',
select: true,
responsive:true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
'columnDefs': [
{
'targets':[column],
'createdCell': function (td) {
$(td).attr('class', 'text-center');
}
}
],
buttons: [
'excel',
{
className: 'boutonCacherLogsMessages',
text: 'Cacher logs et messages',
action: function ( e, dt, node, config ) {
cacherMessages();
cacherLogs();
}
}
],
language: {
"lengthMenu": "Afficher _MENU_ résultats",
search: "_INPUT_",
searchPlaceholder: "Rechercher"
},
});
Can i have your help please ?
Ty
EDIT : Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
I am using Select2 JS and Datatables JS. The data is in JSON format. The data for one value should display as Animal & Veterinary. In JSON it appears as Animal \u0026amp; Veterinary. The Select2 filter displays it as Animal & Veterinary. How can I add a function to the JS below that will decode the Unicode? Below is a function that can work but I dont know how to add it to the JS below.
var title = 'Animal & Veterinary';
function stringToSlug (title) {
return title.toLowerCase().trim()
.replace(/&/g, 'and')
}
Below is the script. This is where I would like to pass the function into the filter. "select2config"
jQuery( document ).ready( function($) {
'use strict';
// Check condition first if the table class exists then run this init.
if ($('.lcds-datatable--advisory-committee-materials').length > 0) {
let pageClass = function () {
let el = $( 'ul.pagination' ).addClass('pagination-sm');
}
// define order of table's control element
let domStyling = "<'row'<'col-sm-12'lB>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>";
var otable9 = $('table.lcds-datatable--advisory-committee-materials').DataTable( {
// Sort of first date column descending.
order: [[0, 'desc']],
deferRender: true,
deferLoading: 50,
dom: domStyling,
ajax: {
"url": "/datatables-json/advisory-committee-materials-json",
//"url": "/sites/default/files/actest1.json",
"dataSrc": ""
},
processing: true,
columns: [
{ "data": "field_publish_date" }, // publish_date 0
{ "data": "title" }, // node title summary 1
{ "data": "field_site_structure" } // site_structure Committee/Topic 2
],
columnDefs: [
{
"type": "date",
"targets": [ 0 ]
}
],
pageLength: 10,
searching: true,
autoWidth: false,
responsive: true,
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
buttons: [
{
extend: 'excel',
text: 'Export Excel',
exportOptions: {
columns: [ 0, 1, 2 ]
}
}
],
initComplete: pageClass,
drawCallback: pageClass
}); // end datatable
// config and initialize filters
let select2config = {
maximumSelectionLength: 0,
minimumInputLength: 0,
tags: true,
selectOnClose: true,
theme: "bootstrap",
}
let search = $( '#lcds-datatable-filter--search' ).lcdsTableFilter({
table: otable9,
type: 'search'
});
let clear = $( '#lcds-datatable-filter--clear' ).lcdsTableFilter({
table: otable9,
type: 'clear'
});
// wait for ajax call to complete to load column data load
$('table.lcds-datatable--advisory-committee-materials').on( 'init.dt', function() {
let committee = $( '#lcds-datatable-filter--committee-topic' ).lcdsTableFilter({
column: 2,
table: otable9,
select2Options: select2config,
type: 'select',
dataType: 'datatable'
});
})
}}); // end ready function and condition if the table class exists.
I was able to pass in a function to alter the output of JSON so now the filter displays “Animal & Veterinary” not “Animal & Veterinary” By adding this below. The filter now displays Animal & Veterinary but selecting this in the filter does not match the value in the datatable?
let select2config = {
maximumSelectionLength: 0,
minimumInputLength: 0,
tags: true,
selectOnClose: true,
theme: "bootstrap",
escapeMarkup: function (text) { return text; }
}
I am pull php data and including inside my table, more specific, inside of the tag tbody, all work well until realize that when I update a line of the table through fnUpdate this don't update just one line but update all table datatable. The question is: how I make it update just this line?
code:
<script type="text/javascript">
$(document).ready(function(){
var table = $('#tabela_produto2');
var tabela = table.dataTable({
"pageLength": 1,
"lengthMenu": [[7, 25, 50, 100, -1], [7, 25, 50, 100, "Todas"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [-9] },
{ "width": "7%", "targets": 0 }
],
"oLanguage": {
"sLengthMenu": "Produtos de Locação por Página: _MENU_",
"sInfo": "_TOTAL_ Produtos de Locação",
"sInfoFiltered": "(Total: _MAX_ Produtos de Locação)"
},
"sDom": '<"top"fi>rt<"bottom"lp><"clear">',
"order": [
[0, "asc"]
], // set first column as a default sort by asc,
"bPaginate": true
});
table.on('click', '.atualiza', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0]; // here the row to update
tabela.fnUpdate('test33' , nRow,4,false); // here do update (but it
update all table and not just this line
tabela.fnDraw();
});
//tabela.fnUpdate('test' , 0,0,false ); // Row
//tabela.fnDeleteRow( 0 );['a', 'b', 'c', 'd', 'e','d','4','4','9']
//tabela.fnDraw();
});
</script>