Print all rows including rows hidden by pagination - javascript

The documentation shows by adding printVisibleRows:false the table.print(false,true) function will print all rows. My table only prints the 20 rows that are visible due to pagination. I would like to print all rows. Is that possible?
//define setup options
var tabData = [{
invalidOptionWarnings: false,
layout: fitDatafill,
printAsHtml:true,
printVisibleRows:false,
printCopyStyle:true, //copy Tabulator styling to HTML table
printHeader:"<h1>"+tdata[0].tablenamedisplay+"<h1>",
printFooter:"<h2><h2>",
autoResize:true,
pagination:"local",
paginationAddRow:"page",
paginationSize:20,
paginationSizeSelector:[25,40,50,100],
movableColumns:false,
tooltipsHeader:true,
columns:tdata[0],
data:tdata[1],
footerElement:myfooter,
rowClick:function(e, row){},
rowContext:function(e, row){
e.preventDefault(); // prevent the browsers default context menu form
appearing.},
}];
//create table
tabEquip[p] = new Tabulator("#"+vDDest, tabData[0] );
My table only prints the 20 rows that are visible due to pagination. I would like to print all rows.

You can do this as of Tabulator v4.8 in one of two ways.
Either by setting the printRowRange option to "active" in the table constructor, and then calling the print function:
///define table
var table = new Tabulator("#example-table", {
printRowRange:"active", //print all active rows
});
//print table
table.print();
Or by passing the string "active" into the print function when you call it:
table.print("active", true);

Related

Tabulator from existing datatable

I'm generating a tabulator table with a groupBy method from an already filtered datatable (from DataTable.js) with date range and parameters already defined. The new tabulator table is working perfectly fine but takes the whole data regardless of the filters already applied to the table I need to create the groupby from. My original datatable is:
var table = $('#datatable').DataTable();
and with the filters is 20 lines long. When creating the tabulator from that datatable it takes the whole data. Is there a way to reuse the same filtered table already existent to create a tabulator groupBy approach?
here's the code of my tabulator:
if(table!=null){
$('#datatable').DataTable().destroy();
}
var tableTab = new Tabulator('#datatable',{
groupToggleElement:"header",
height:"100%",
virtualDomBuffer: "100%",
layout:"fitColumns",
pagination:"local",
//paginationSize:false,
movableRows:false,
groupBy:"Id",
groupStartOpen:false,
columns:[
{title:"a", field:"a", width:200},
{title:"b", field:"b"},
{title:"c", field:"c"},
{title:"d", field:"d"},
{title:"Id", field:"Id"},
{title:"e", field:"e"},
{title:"CreatedDate", field:"CreatedDate"},
],
});
tableTab.setFilter($('#select').val(), $('datepickerStart').datepicker, $( "#datepickerEnd").datepicker());
IS there a way to create the new Tabulator from the filtered table.DataTable() and not from the whole '#datatable' with the full data?
Example:
select only a's in the last 10 days and groupBy b's.
Thank you
You can use the initialFilter option to set filters on the table when it loads, so you shouldnt need to call the setFilter function:
var tableTab = new Tabulator('#datatable',{
groupToggleElement:"header",
height:"100%",
layout:"fitColumns",
pagination:"local",
movableRows:false,
groupBy:"Id",
groupStartOpen:false,
initialFilter:[
{field:"a", type:"=", value:5000} //set an initial filter that will only show rows with an a value of 5000
],
columns:[
{title:"a", field:"a", width:200},
{title:"b", field:"b"},
{title:"c", field:"c"},
{title:"d", field:"d"},
{title:"Id", field:"Id"},
{title:"e", field:"e"},
{title:"CreatedDate", field:"CreatedDate"},
],
});
You will need to provide three properties for each initial filter, the field name of the column you want to filter, the Filter Function and the value to filter for

Uncollapse Columns by RowClick

I have setup my table in Tabulator with responsiveLayout:"collapse" and responsiveLayoutCollapseStartOpen:false.
My table display properly with collapsed columns.
I added formatter:"responsiveCollapse" as column and I properly get the column with + and - icons and can manually expand/collapse the columns.
But for usability on a smartphone, the icon renders really a bit small.
I want to add to expand/collapse based on callback rowClick.
I found responsiveCollapse and toggleList in tabulator.js, so I think I know what needs to happen. However I am totally struggling how to return it out of rowClick.
Thank you very much for a hint in advance.
In the tabulator constructor I have:
columns:[
{ formatter:"responsiveCollapse", width:30, minWidth:30,
hozAlign:"center", resizable:false, headerSort:false, responsive:0 },
{ title:"Ren.", field:"Race_Number", sorter:"number",
hozAlign:"center", minWidth:60, widthGrow:1, responsive:0 },
]
And basically I want to achieve the some functionality as formatter:"responsiveCollapse" in rowClick:
rowClick:function(e, id, data, row){
//trigger an alert message when the row is clicked
//what to do here to achieve same as formatter:"responsiveCollapse"
},
You could copy some of the code from the built-in responsiveCollapse formatter to achieve this. It will involve accessing some private variables, which is a bit naughty, but it will do the job:
rowClick:function(e, id, data, row){
var config = cell.getRow()._row.modules.responsiveLayout; //get the responsive config object for the row
var collapseEl = config.element; //get the collapsible element for the row
if(collapseEl){ //check if the row has any collapsed data
config.open = !config.open; toggle the open state
//toggle the collapse element
if(config.open){
el.classList.add("open");
collapseEl.style.display = '';
}else{
el.classList.remove("open");
collapseEl.style.display = 'none';
}
}
}
this was very helpful, remember to comment out "toggle the open state" and also update
el.classList.remove("open");
to
collapseEl.classList.remove("open");

Input field in Table "keeps" edited number in same row while scrolling (JSView)

I've got a sap.ui.table.Table with Input fields and the table gets the data via JSON which works well. However, if I edit the value in the first row for example, and try to scroll down, the value "stays" in the first row until a different value hits this field. So it basically updates every cell except the edited one while scrolling. After that, I scroll up again to see the value I changed, but this value now has the old value from the load at the beginning again.
I think something with my binding isn't correct at all, because I haven't seen anything like this yet. I know that tables only update the row contexts but I can't figure out how to do this.
Here is a example: https://jsbin.com/yuvujozide/6/edit?html,console,output
Edit the right "Gates" and scroll, to see how it disappears and edit the left value and scroll to see how the value scrolls with the table.
I tried to remove/set the VisibleRowCount and logged to see if the data gets loaded multiple times but that's not the case.
var oModel = new sap.ui.model.json.JSONModel();
var oTable = new sap.ui.table.Table({
visibleRowCount: 12,
selectionMode: sap.ui.table.SelectionMode.Single,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
editable: true
});
oModel.setData({ rows: tableRows.value, columns: columnArray });
oTable.setModel(oModel);
var counter = 0;
oTable.bindColumns("/columns", function (sId, oContext) {
var columnName = columnArray[counter];
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
}).bindProperty("value", columnName, function (cellValue) {
return returnRange(this, oTable, cellValue, columnName, counter, dic);
});
counter++;
return new sap.ui.table.Column({
label: columnName,
template: defaultTemplate,
flexible: true,
autoResizable: true,
width: 'auto',
multiLabels: [
new sap.ui.commons.Label({ text: columnName }),
new sap.ui.commons.Label({ text: dic[Number(counter - 1)].value[0] + " - " + dic[Number(counter - 1)].value[1] })
]
});
});
oTable.bindRows("/rows");
As you can see I separated the rowData and columnNames in two arrays:
tableRows and columnArray
The returnRange function checks some values and just returns the cellValue
I would expect that the Input fields keeps the changed values (which is probably normal), so I can change several Input fields and then I can Update the table via Ajax-Call.
The problem is that sap.ui.table.Table has a custom scrolling behaviour that is different from the default browser scrolling. Instead of creating a row for each record, it will create a fixed number of rows and re-bind these rows after each scroll.
If the table is editable and bound to a JSONModel, it will usually create a two-way-binding and update the model values upon user input, hence scrolling works fine. But since you have provided a custom formatter function for the binding (returnRange), a two-way-binding is not possible anymore. This means that any user input is lost after scrolling.
If you remove the formatter function like this
var defaultTemplate = new sap.m.Input({
value: "{" + columnName + "}"
});
it will work fine.
In case you want to validate the user input, you should listen to the input's change event and use InputBase#setValue to set it to a different value. This will also reflect your changes in the JSONModel.

Style a checkbox in datatable columns

I have a datatable from ajax source. I want to display a checkbox in one column based on its value.
If the value is active, checkbox should be checked, otherwise it remains unchecked.
I am using Switchery JS to stylize the checkbox. It works fine in normal HTML body, but not inside a datatable column.
Here is the fiddle:
https://jsfiddle.net/sohal/gfuuazxL/4/
The problem is that you are doing the Switchery' before the dataTable is populated with data. And even if you did it after, you would still end up not having Switcherys on hidden rows, i.e on page #2, #3 and so on.
So you must initialise Switchery after the dataTable is initialised and do the Switchery on all rows. You can do this in the initComplete() callback, and iterate over all rows by using the API every() method :
$(document).ready(function() {
var table = $('#datatable-buttons').DataTable({
initComplete : function() {
this.api().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this.nodes().to$().find('.js-switch').each(function(i, e) {
var switchery = new Switchery(e, {
color: '#26B99A'
})
})
})
},
...//rest of the options
})
})
forked fiddle -> https://jsfiddle.net/jpkysyp1/

Required Help in Hiding Table Rows - dc.js

I'm using dc.js to plot chart and show data tables.
Everything runs quite good. And for the table i've created a dimension and also a group. Passing the group variable to dynatable records.
Problem is when I do some selection in the chart. The data table value are of course getting changed. But the there are few records which are supposed to hidden instead they come with 0 value.
I wanted to hide those rows.
Below are the functions I'm using.
Table Dimension :
var tableDim = ndx.dimension(function(d) { return d.label; })
Table Group: var tableGroup = tableDim.group().reduceSum(function(d) { return d.count; })
Dyna Table:
var dynatable = $('.data-table').dynatable({
features: {
pushState: false
},
dataset: {
records: tableGroup.top(Infinity),
perPageDefault: 10,
perPageOptions: [10, 20, 100, 500, 1000]
}
}).data('dynatable');
Refresh the table on chart selection :
function RefreshTable() {
dc.events.trigger(function () {
dynatable.settings.dataset.originalRecords = tableGroup.top(Infinity);
dynatable.process();
});
$('.data-table tr').each(function() {
if ($(this).find('td:nth-child(2)').text() < 1) {
$(this).addClass('zero-value');
}
})
};
I've written jquery codes to assign a class for the rows with zero-value. And it gets assigns only for the first 10 records as I've given the perPageDefault: 10. But I want to it run for the entire table records.
Some one please help me in hiding those rows with values 0.
Before assigning the records in the dynaTable initialization and RefreshTable, you can copy the data and remove records that have value 0.
Dynatable is acting on the records that you pass it, so you can change that data in any way you see fit.

Categories