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.
Related
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
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);
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.
I use this table-dragger plugin.
I want save sorted data table on localStorage, when then user reloads the page I want to save the ordered table for him.
I have code:
var el = document.getElementById('table');
var dragger = tableDragger(el, {
mode: 'column',
dragHandler: '.handle',
onlyBody: true,
animation: 300
});
dragger.on('drop',function(from, to){
// Setting the Value.
localStorage.setItem("keyName", "value"); // Syntax
localStorage.setItem("table_layout", table_layout); // by variable
localStorage.setItem("table_layout", "from to?"); // by value
// Get the value.
localStorage.getItem("table_layout");
// Clear one item.
localStorage.removeItem("table_layout");
// Clear all items.
localStorage.clear();
});
I don't know how to save the ordered data table correctly. When I reload the page, all my changes lost.
My table contains thre columns; "name", "description" and "status". I have a dropdown field which filters the table on the status column. Essentially:
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$('#dt').DataTable().column('status:name').search(value).draw();
}
});
This works, but the problem is the standard free-text search input field includes the status field in the free-text search.
Setting searchable: false on the status field causes the dropdown to stop working since Datatable ignores it.
{
data: 'status',
name: 'status',
searchable: false // Stops table.column().search(value) from working :-(
}
Ideally, the (standard) free-text search field should ignore the stuatus column, but the dropdown code should still be working.
This works:
Set the column to searchable: false. This makes the table ignore this column in free text searches.
Add a custom search which uses the original row data, settings.aoData, instead of the data array (it doesn't contain the column because of 1.)
Redraw the table when the filter dropdown changes.
Code:
$('#dt').DataTable(defaults)
.on('init.dt', statusHandling);
function statusHandling(e, settings, processing) {
// Redraw table on dropdown status change
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$(options.table).DataTable().draw();
}
});
// Our custom search function which adds an AND 'status = foo' condition
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var input = $('input[name=status]').val().toLowerCase();
// Use original data instead of 'data' because status is not searchable
var status = settings.aoData[dataIndex]['_aData']['status'];
return status.toLowerCase().indexOf(input) === 0;
}
);
}