Hello,
i came across this but this doesnt seem to have the answer there.
https://datatables.net/forums/discussion/30129/print-screen-or-multiple-tables-with-single-button
I have the similar situation. i have 2 data tables on same page and i want them to print on a single button click in a single view. how do i do it?
Hi,
It seems than I cannot find how to use the table.columns([0, 1, 2, 3]).search().draw() method properly...
When I tried it, it doesn't gave me the result I expected...
My simplified JS code look like this:
var table = $('#list').DataTable();
$("#list_filter input").on('keyup click', function() {
table.columns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]).search($(this).val()).draw();
});
$("#number_search").on('keyup click', function() {
table.column(10).search($(this).val()).draw();
});
All the searchable are true and columns 9 and 10 are .hidden (display: none !important;).
My purpose here is to use the "usual" search field to search in the 10 1st column and the last one with an extra text field...
Does this search method searches on column 0 AND column 1 AND column 2 AND ... in spite of what I am expecting with OR ??
Thanks for any help!
Hi guy's,
I've created an "extension" to the datatables to project my needs.
It basically consists on a box with many types of filters. Multi checkbox's that are added to a regex string for search purposes, many types of calculations depending on the type of data to check if it's null, bigger than etc to add the result to the regex string and the possibility of having an external filtering data coming from multiple charts. Basicly I'm getting the current data saved at the local storage and editing the search string's from the correct columns.
All this seems pretty "doable", except a problem I'm having.
When loading the chart from the local storage - as explained in the manual from here - it comes everything correct but I can't access in any way to the cache from the search, so that I can create the filtering system.
From what I've understood, when doing:
table.column(table.colReorder.transpose(colIdx)).cache('search').unique().sort().each(function (d) {
The unique() and sort() would "emulate" a change to the datatable, so there should always be cache at the search.
Isn't this the main purpose, like it's explained on the manual?
Thank you all.
Hi guy's,
I'm working on something complex and I would like to know something. Can I change the regex from the search to accept "OR" parameters?
Thank you
Hi All,
I have an HTML table with 50+ columns and a fixed number of rows.
I would like to filter the table by selecting only two columns (possibly using two select fields) and compare them.
Is this possible to do with datatables?
TIA
Tony
Hi,
I seem unable to replace the default filtering.
I want to keep the default GUI search box, but I want my function to run instead of it combining the default and my custom.
Problem is , my custom search is an OR, but the default search creates it as an AND, so I'm not getting rows returned.
How do I override the default search function without having to use my own DOM control or how do I make the custom search and the default search work together as an OR not an AND?
here is my custom filter...
// data tables custom search to include genres, styles, labels not displayed in GUI
// case insensitive
$.fn.dataTableExt.afnFiltering.push(
function (settings, data, dataIndex) {
var search = $('.dataTables_filter input').val();
var found = false;
if (search == '') {
found = true;
}
else {
// check displayed values
// barcode
if (data[0].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }
//cat no
if (data[1].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }
// title
if (data[2].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }
// year
if (data[3].toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) { found = true; }
// don't waste time if already found
if (!found)
{
// loop Genres
$.each(settings.aoData[dataIndex]._aData.Genres, function (i, obj) {
if (obj.genre.toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) {
found = true;
}
});
// loop Styles
$.each(settings.aoData[dataIndex]._aData.Styles, function (i, obj) {
if (obj.style.toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) {
found = true;
}
});
// loop Labels
$.each(settings.aoData[dataIndex]._aData.Labels, function (i, obj) {
if (obj.label.toLowerCase().includes(settings.oPreviousSearch.sSearch.toLowerCase())) {
found = true;
}
});
}
}
return found;
}
);
Hi, I am using Datatable version 1.9.4.
A style change is occurring if I am adding the "full_numbers" option.
Please see the attached images.
It looks good according to my theme while I don't use any type of options but it adds the default style if I use "full_numbers" option.
Normal
Full Number
I want to keep the style normal as you can see. Is there a way?
Hi,
referring to this post, is there any way to add some custom additional data (I specifically need to add relationships and aliases informations to table fields) to every column in datatable configuration?
Thank you,
Alex
Why does the last column always get the value style='display:none'?
This makes the last column always dissapear, even if there is plenty of room for it..
For example: if you only have four columns and plenty of space, the first three then become extremely wide (even with only values like 1, 2 and 3 in it) and the lastcolumn is always hidden.
Please solve/explain this.
I have a datable..But I have a problem.
I have the code below.
When I ordered the dropdowns (see image): Line code
column.order('asc').draw(false).data().unique().each( function ( d, j ) {
The list of images in the table becomes unordered.
For the table to be sorted, I have to delete this order('asc') from the code.
But I need this to sort the dropdowns.
Can you help me sort the table again?
CODE
`var table = $('#tableModel').dataTable({
"initComplete": function (settings, json) {
var orderInit = this.api().order();
this.api().columns([1, 2,3,4,5,6,7]).every( function (index) {
var column = this;
var select = $('<select class="selectpicker"><option value="">All</option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
var r = $('#tableModel tfoot tr');
r.find('th').each(function(){
$(this).css('padding', 8);
});
$('#tableModel thead').append(r);
$('#search_0').css('text-align', 'center');
// NOTE: Temporarily sort the column data before retrieving it
// with data() function.
column.order('asc').draw(false).data().unique().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );**
} );
},
"pageLength": 100,
"responsive": true,
"destroy": true,
"bprocessing": true,
"bserverSide": true,
"sAjaxSource": "assets/scripts/getAjax.php",
"sServerMethod": "POST",
"pagingType": "simple_numbers",
"dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
"aaSorting": [[0, "desc"]],
"oLanguage": {
"sSearch": "Search",
"sEmptyTable": "No data to display",
"sInfo": "Showing _START_ to _END_ entries (Total: _TOTAL_)",
"sLengthMenu": "Show _MENU_ entries",
"sInfoFiltered": "Filtering _MAX_ entries",
"sLoadingRecords": "Please wait - loading...",
"sProcessing": "Processing...",
"oPaginate": {
"sFirst": "First",
"sLast": "Last",
"sPrevious": "Previous",
"sNext": "Next"
}
},
"aoColumns": [
{"mDataProp": "Image", "bSortable": false, "bVisible": true},
{"mDataProp": "option1", "bSortable": true, "bVisible": true},
{"mDataProp": "option2", "bSortable": true, "bVisible": true},
{"mDataProp": "Age", "bSortable": true, "bVisible": true},
{"mDataProp": "option4", "bSortable": true, "bVisible": true},
{"mDataProp": "option5", "bSortable": true, "bVisible": true},
{"mDataProp": "option6", "bSortable": true, "bVisible": true},
{"mDataProp": "option7", "bSortable": true, "bVisible": true},
{"mDataProp": "Edit", "bSortable": false, "bVisible": true},
{"mDataProp": "Id", "bSortable": true, "bVisible": false}
],
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0]},
{
"aTargets": [0],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' +
'<a class="gallery-item" href="" data-gallery>' +
'<img src="' + pathThumbnail + '" alt="' + data + '"/></a></div>';
}
},
{"bSortable": true, "aTargets": [1]},
{
"aTargets": [1],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
{"bSortable": true, "aTargets": [2]},
{
"aTargets": [2],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
{"bSortable": true, "aTargets": [3]},
{
"aTargets": [3],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
{"bSortable": true, "aTargets": [4]},
{
"aTargets": [4],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
{"bSortable": true, "aTargets": [5]},
{
"aTargets": [5],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
{"bSortable": true, "aTargets": [6]},
{
"aTargets": [6],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
{"bSortable": true, "aTargets": [7]},
{
"aTargets": [7],
"mRender": function (data, type, full) {
return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
}
},
`
I am using html 5 exporter and it is working as expected for fields with columns with simple text format (no html formatting).
For columns that display fa-icons instead of text the column shows empty during print and export.
For example this rendered column (that displays 3 stars)
<td>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</td>
shows empty during print/export. Those functions only print the inner text of the cell (which is obviously empty)
Is there a way to include the html formatting for a column during print/export?
error coming
Hi, i use datatables in angular. And set .withColumnFilter for filtering tables.
.withColumnFilter({
aoColumns: [
null,
{
type: 'select',
bRegex: false,
values: function (aoData, oSettings) {
var keys = new Array();
var values = new Array();
for (i = 0; i < aoData.length; i++) {
var item = aoData[i]._aData[3];
if (keys[item] == null) {
keys[item] = true;
values.push({value: item, label: 'The ' + item}); }}
return values; }}] });
Select list is populate with data from table, and its ok. But after came back, in select list, on first line is list of all array, inline. Here is image how this look
hello, i am using buttons to export my table to files. I understand I can change the name by setting "title".
Is there a way to change it dynamically, so everytime the user clicks on the button, it gets a new name ? like name+timestamp to differentiate them .
I put that in the title
thanks, pat
I am using server side processing for my tables. I have tables that have 60000+ rows with 65+ columns, so using client side is not an option for me. My end users want to pull up the tables and then use the filtering and sorting to narrow down what they are seeing. Then they want to Export All, usually still 30k - 40k rows with the 65+ columns and with the sorting in place too. I have tried a few things that I've found elsewhere and am hoping that you can help. Here's what I've tried so far:
{ extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
}
This does not do what I would like. It exports only the current page (which is why I made the text for it 'Export Current Page')
I've also tried this:
{
text: 'Export All to Excel',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('draw', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
}).draw();
}
}
This simply sends the whole table to the screen instead of sending it to an excel file. Though it does pull the whole data set.
I'm sure that through the two of these I'm missing something that would allow me to Export the whole data set without sending it to the screen first.
Currently, trying to save and view various mimetypes (log, txt, pdf, csv by selecting a Child Row. Proving to be an ajax nightmare. Would trying select extension improve my efforts? Any working examples?
In the Always Shown Checkbox example at https://editor.datatables.net/examples/api/checkbox.html, clicking a box gives nice visual feedback -- the row highlights briefly. My implementation works fine from a data standpoint but without row highlighting. What am I missing? Is it a style library issue? I am using bootstrap styling.
Here stateLoadCallback function firing twice.
Is this is a functionality or BUG?
How can I fix?
Can you please help me with this..
This is my code...
var defaultConfig = {
columns: tableCols,
data: [],
dom: '<"search"f>rtip1',
language: {
lengthMenu: 'MENU'
},
isFullWidth: true,
autoWidth: false,
destroy: true,
colReorder: true,
select: false,
serverSide: false,
stateSave: true,
searching: true,
scrollX: true,
stateLoadParams: function (settings, data) {
// Firing twice
console.log('load');
},
stateLoadCallback: function (settings) {
// Firing twice
console.log('save');
}
Been using datatables for a while and recently upgraded when I purchased Editor (needed to from memory, getting incompatible version message). I think since the upgrade I am getting borders around the processing gif (see the screenshot) whereas before I wasn't. Project is RoR & Bootstrap 3. Any way I can remove the border (css, option ... etc.)?
Code for the gif is pretty standard I think
"language": {
"processing": "<img src='<%= asset_path('processing.gif') %>'>"
},
High Level: I have a table that I am filtering, I want export buttons to include ALL data in the table, including what's filtered, including hidden columns.
It feels like all the articles I find are people leveraging AJAX and asking how they export data currently loaded + data that's unloaded. That is NOT my issue, I'm not using AJAX and the data is all encapsulated on the page. My initialization is fairly simple:
var table = $('#table').DataTable({
dom: 'Bfrtip',
"aoColumnDefs": [
{
"aTargets": [0,1,2],
"bVisible": true,
"bSearchable": true
},
{
"aTargets": [3],
"bVisible": false,
"bSearchable": true
},
{
"aTargets": ['_all'],
"bVisible": false,
"bSearchable": false
}
],
buttons: [
'csv', 'excelHtml5', 'pdf', 'print'
]
});
My reading suggests TableTools would do this, but I don't have much interest in the deprecated and replaced tool. Can this be accomplished with Buttons? Hidden columns are included just fine, it's the currently filtered data I can't find a way to include.
Thanks!