I have created YUI3 Datatable with Pagination (used gallery module: gallery-datatable-paginator).
var withColumnLabels = new Y.DataTable({
columns: columnDef,
data : data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs",
sortBy: {"mfr_parts_database_name":"desc"},
paginator: new Y.PaginatorView({
model: new Y.PaginatorModel({itemsPerPage:2}),
container: '#labelsPaginatorTemplate'
})
}).render('#labels');
Demo: http://jsfiddle.net/mail2asik/MqwyU/5/
In the above URL, sorting is enabled by default in second column. After render data table, If I am going to sort first column, the second column sorting icon not change as default indicator. Please anyone suggest me to fix the same.
It is working fine if I am not use gallery-datatable-paginator.
var withColumnLabels = new Y.DataTable({
columns: columnDef,
data : data,
summary: "Price sheet for inventory parts",
caption: "These columns have labels and abbrs",
sortBy: {"mfr_parts_database_name":"desc"}
}).render('#labels');
Demo : http://jsfiddle.net/mail2asik/r3Cbu/6/
I have fixed the issue using "pageUpdate" event but it is not perfect solutions because it should be fixed in core level.
//pageupdate event
withColumnLabels.on('pageUpdate', function (e) {
var sortBy = this.get('sortBy');
if(sortBy){
Y.all(".yui3-datatable-table thead>tr>th").removeClass('yui3-datatable-sorted').removeClass('yui3-datatable-sorted-desc');
var sortObj = sortBy[0],
sortKey = Y.Object.keys(sortObj)[0],
key=sortObj[sortKey];
if(key=="1"){
Y.one(".yui3-datatable-table .yui3-datatable-col-"+sortKey).addClass("yui3-datatable-sorted");
}else{
Y.one(".yui3-datatable-table .yui3-datatable-col-"+sortKey).addClass("yui3-datatable-sorted").addClass("yui3-datatable-sorted-desc");
}
}
});
http://jsfiddle.net/MqwyU/7/
Related
I am looking if there is any I can add a print button to tabulator row and when it is clicked it prints that particular row?
http://tabulator.info/docs/4.3/print
thanks
There is no built in functionality for this, but you could easily put something together to achieve this. This examples assumes that each row has a unique id field.
You could use a custom formatter to create a Button Column, then use that to filter the table to just that row, then print the table, then clear the filter:
//custom formatter definition
var printIcon = function(cell, formatterParams, onRendered){ //plain text value
return "<i class='fa fa-print'></i>";
};
//column definition in the columns array
{formatter:printIcon, width:40, align:"center", cellClick:function(e, cell){
//filter table to just this row
table.Filter(function(data){
return data.id == cell.getData().id;
});
//print the table
table.print();
//clear the filter
table.clearFilter();
}},
I am using tabulator js for table generation and exporting it into pdf.
Table generated using tabulator is showing total table calculation in table footer but after downloading pdf there is no table footer. (i.e. there is no total calculation showing up).
Here is the screenshot of html table generated using tabulator.
let table = new Tabulator(selector, {
columnCalcs: "both",
columnVertAlign: "bottom", //align header contents to bottom of cell
data: tableData, //assign data to table
//Pre-format tabulator raw data before downloading
downloadDataFormatter: function (data) { //data - active table data array
//change calculations group info and reformat currency values
data.calcs = updateTotalColumn(data.calcs);
data.calcs = reformatCurrencyCalculations(data.calcs);
data.calcs = renameGroupKeysforCalcs(data.calcs);
//Update Row headers appending prev headers
data.data = subGroupHeader(data.data);
//return data for download
return data;
},
downloadConfig: {
columnGroups: true,
rowGroups: true,
columnCalcs: true
},
layout: "fitData", //fit columns to width of table
groupBy: groupByData,
groupStartOpen: groupOpenAtLoad,
groupHeader: groupHeaders,
groupToggleElement: groupToggleElement,
columns: tableColumns
});
You need to set download config
downloadConfig:{
columnCalcs:true,
},
I struggling with datatables to fill my table.
The problem i have is that when i get my google calendars in this format
{"23gjsd91su3guu509o1bchhqms#group.calendar.google.com":{"calendar_id":"23gjsd91su3guu509o1bchhqms#group.calendar.google.com","calendar_title":"#1612 White Quartz Apartment"},"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com":{"calendar_id":"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com","calendar_title":"#994 Cisco Amber (T2)"},"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com":{"calendar_id":"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com","calendar_title":"#1443. Marley Blue"}}
Need help on put datatables to work with this.
Thanks
You must sanitize the JSON so it is ordered on the form [{item}, {item}, ..] :
function sanitizeData() {
result = [];
Object.keys(data).forEach(function(key) {
result.push(data[key]);
})
return result;
}
Then, if you have table like this
<table id="example"></table>
You can now populate a dataTable with the content of the JSON this way :
var table = $('#example').DataTable({
data : sanitizeData(),
columns : [
{ title : 'id', data : 'calendar_id' },
{ title : 'title', data : 'calendar_title' }
]
})
demo -> http://jsfiddle.net/zbuudydv/1/
i want row details for what i clicked,actually am using create editor for assigning dropdownlist in grid column i got it correctly but am not getting the row details properly every row giving same values so how can i get correct row details
i used this code
{
text: 'Sort Type', dataField: 'aliasname1', columntype: 'dropdownlist', width: '11%', editable: true,
createeditor: function (row, cellvalue, editor) {
var colvalue = $('#shipmentgrid').jqxGrid('getcellvalue', row, 'column');
var tblvalue = $('#shipmentgrid').jqxGrid('getcellvalue', row, 'table');
// construct the editor.
var requiredfield = ["Ascending", "Descending", "Unsorted"];
editor.jqxDropDownList({ source: requiredfield, dropDownHeight: '80px', autoDropDownHeight: 0, selectedIndex:-1, checkboxes: true })
}
},
The row's index is passed as parameter - function(row, ....
If you want to get the row's data based on that index you may use getrowdata method and pass the row's index as param.
edit: Solved thanks to asgallant. See below for the answer.
this is my first question, I'm fairly new to programming and I'm hoping to find some answers on here.
I'm trying to create a dashboard with the Google Visualization API to show a table and a search box to search for usernames which is working fine.
But I would like to keep the first and last name separated in 2 columns so that they can be sorted by either first or last name but in the searchbox I want to be able to search for either name.
Since the StringFilter cannot search multiple columns, I've created another column which combines the 2 names and bound it to the StringFilter. So far so good.
Now I want to hide the column that combines first and last name in the table but still be able to use the StringFilter to search that hidden column.
After searching quite a bit on this website as well as others, I couldn't find a solution to my problem. It seems like this should be possible with the DataView but I couldn't get it to work.
The hiding works fine with a DataView but as soon as the column is hidden, I get an error saying that the StringFilter option 'filterColumnIndex' should be in the range 0-4 because column 5 is hidden.
I've tried it already with dashboard.draw(view, options: {view: [0,1,2,3,4]});
and dashboard.draw(view, options: {data: [0,1,2,3,4]});
Is this even possible? Any help would be appreciated!
Thanks for your time.
Here is my code so far:
function DrawDashboard() {
$.ajax({
url: "/report/toverview/rest/router.php/user/",
dataType: 'json'
}).done(function (result) {
//------------------------------------------------------------------//
// Create and populate the data table.
//------------------------------------------------------------------//
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'TU-ID');
data.addColumn('string', 'Vorname');
data.addColumn('string', 'Nachname');
data.addColumn('string', 'E-Mail');
data.addColumn('string', 'FullName')
var array = new Array();
result = result.Records;
//console.log(result);
$.each(result, function(id, felder) {
//console.log(felder);
var subarray = new Array();
subarray.push(parseInt(felder.id));
subarray.push(felder.username);
subarray.push(felder.firstname);
subarray.push(felder.lastname);
subarray.push(felder.email);
subarray.push(felder.firstname + ' ' + felder.lastname);
array.push(subarray);
});
data.addRows(array);
//------------------------------------------------------------------//
// Create a search box to search for the user name.
//------------------------------------------------------------------//
var stringFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'string_filter_div_nutzer',
options: {
filterColumnIndex: 5,
matchType: 'any',
ui: {
label: 'Nutzer suchen:'
}
}
});
//------------------------------------------------------------------//
// Create the table to display.
//------------------------------------------------------------------//
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div_nutzer',
options: {
showRowNumber: false,
page: 'enable',
pageSize: 25
}
});
var view = new google.visualization.DataView(data);
//view.setColumns([0,1,2,3,4]);
//view.hideColumns([5]);
//------------------------------------------------------------------//
// Create a dashboard.
//------------------------------------------------------------------//
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboardUser'));
//------------------------------------------------------------------//
// Establish dependencies.
//------------------------------------------------------------------//
dashboard.bind([stringFilter], [table]);
//------------------------------------------------------------------//
// Draw the dashboard.
//------------------------------------------------------------------//
dashboard.draw(view);
});
};
You need to set the view in the Table's ChartWrapper, not when calling dashboard.draw:
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div_nutzer',
options: {
showRowNumber: false,
page: 'enable',
pageSize: 25
},
view: {
columns: [0, 1, 2, 3, 4]
}
});
then draw the Dashboard with your DataTable:
dashboard.draw(data);