I have a data table that has a hidden column. I want to set the values of that column to a java script array. (Note: I want to get the values that belong to the current page only). If I use a search filter, I want the values of the current page of the search result.
I've tried like this.
$('#datatbl').DataTable().rows({filter: 'applied'}).every(function () {
var row = this.data();
arr.push(row[0]);
});
But,this code gives all values from all the pages. Please help....
Try adding page:'current' in selector.
$('#datatbl').DataTable().rows({filter: 'applied', page:'current'})
Related
I need to show multiple values (rank and vote) together separated by space as key:value in a webix datatable cell from the following structure :
id2: [{"rank":2, "vote":50}, {"rank":3, "vote":10}]
I want to show only the first element of this above array.
My snippet is here : https://webix.com/snippet/ca50874d
I am not able to figure out how to show these two values together in one cell.
Please help.
Thanks.
To show multiple values in the cell, or if you want to format the value according to you, you just need to use to template for that cell:
While specifying column configuration, you can specify the template for that particular column like below:
template:function(obj) {
}
This template will be called for each row, and obj contains the row object.
For your example you can specify the template like below:
template:function(obj) {
return obj.column1 +':' + obj.column2;
}
I further tried and could figure out the answer on my own. To show the first element of that array object, the 'map' attribute has to be used as below:
{ id:"id2", header:"Rank", width:80, map:"#id2[0].rank# : #id2[0].vote# "}
The working snippet for the same is here : https://webix.com/snippet/928bab77
How can I append a table with D3.js only if this table doesn't already exist?
E.g. I want to append several tables to a DIV, so if a table with id='table1' has already been appended, in case it appears again in my list with updates, I would like it to be updated but not appended again as a second table.
What I do so far is:
var tableDiv = d3.select( '#tablesContainer' ).append('table').attr('id', 'table1');
however in case I try to append a second table with same id, id=table1, it will create a new DOM element with that same id.
Any help is very much apreciated.
To update already existing Dom elements, you want to select, and then manipulate them like so:
var table = d3.select('#tablesContainer').select('#table1');
and do something to the table, e.g.
table.style("backgroundColor", "grey");
You are using an append, where you should be using select.
In case you were planning on creating the tables based on data, use the update Selection:
var tables = d3.select('#tablesContainer').data(data).style("backgroundColor", "grey");
To enter and update in two lines of code:
d3.select('#tablesContainer').data(data);
tables.enter().append("table").merge(tables).style("backgroundColor", "grey");
I have a table component in my Pentaho CDE dashboard and data source is sql. I want to make a table like this
enter image description here
I need to add a column as row names for this table and a row on the top of column header.
I found a method here:
Table Component SubColumns
to add header, but how can i add a column before other columns?
I think a clever way to do the extra column part would be by modifying the query result object after it's retrieved from the query, so that you add the columns and rows as needed. You can do this in the PostFetch callback function, which takes the query result object as first argument:
function yourTableComponentPostFetch(queryResult) {
// Let's say you have an array of row names
var rowNames = ['Title1', 'Title2', ... ];
// Add a "title" column for every row
queryResult.resultset.forEach(function (row, idx) {
// Push it at the beginning of the row array
row.unshift(rowNames[idx]);
});
// Change metadata description of columns to reflect this new structure
queryResult.metadata.unshift({
colName: 'Title',
colIndex: -1, // this makes sense when reindexing columns below ;)
colType: 'String'
});
// One last re-indexing of metadata column descriptions
queryResult.metadata.forEach(function (column, idx) {
// The title added column will be 0, and the rest will rearrange
column.colIndex++;
});
}
The only tricky part is the part about modifying the metadata since you are effectively changing the structure of the dataset, and making sure the queryResult object is updated in-place instead of just changing its reference (queryResult = myNewQueryResult would not work), but the code I proposed should do the trick.
I have created a jqGrid - Pivot table JSFiddle example: here.
In this It should not print the line if Component Type value is blank, I Used this empty column, to show all periods(months) in the year, which is mandatory.
Need help in removing that blank line. and also is it possible to remove the last sum column 2015 from grid, if so how?
You includes dummy data with ComponentType:"" group which you don't want to display. So the best solution which I see would be to include the data in the input pivot data only, but don't use the dummy data in the grid data. jqPivot uses datatype: "jsonstring" to prevent additional sorting of previously sorted data. The input data will be placed as the value of datastr option. So one can use the following onInitGrid to remove the dummy data before the data will be processed by jqGrid:
onInitGrid: function () {
var p = $(this).jqGrid("getGridParam"),
userdata = p.datastr.userdata;
p.datastr = $.grep(p.datastr, function (item) {
return item.ComponentType !== "";
});
p.datastr.userdata = userdata;
}
see the modified demo http://jsfiddle.net/OlegKi/b47ocLd7/11/.
On my grid, after a user enters text on the bottom row, I am adding another row so they can fill out another row if needed. The grid will grow as needed by the user. This is working fine, however after a page reload and populating from db, the addrowdata() function does not honor existing row ids and creates duplicates, starting from 1 again, e.g. jqg1. It should look at existing row ids and create new unique ids. So if I have 5 rows already, it might start at jqg6. Here is the relevant code inside onCellSelect:
var records = jQuery("#table-1").jqGrid('getGridParam', 'records');
var lastRowId = jQuery("#table-1").jqGrid('getDataIDs')[records - 1];
if (lastRowId == id)
{
jQuery('#table-1').addRowData(undefined, {}, 'last');
}
I have also tried $.jgrid.randId() instead of undefined, same results as expected.
Thanks
Ryan
I think that the error is in the part where you fill grid with the data from the database. The data saved in the database has unique ids. The ids are not in the form jqg1, jqg2, ... So if should be no conflicts. You should just fill the id fields of the JSON with the ids from the database.
One more possibility is that you just specify the rowid parameter (the first parameter) of addRowData yourself. In the case you will have full control on the new ids of the rows added in the grid.
The code of $.jgrid.randId function is very easy. There are $.jgrid.uidPref initialized as 'jqg' and $.jgrid.guid initialized to 1. The $.jgrid.randId function do the following
$.jgrid.randId = function (prefix) {
return (prefix? prefix: $.jgrid.uidPref) + ($.jgrid.guid++);
}
If it is really required you can increase (but not decrease) the $.jgrid.guid value without any negative side effects.