I've a table of unknown data (some columns and rows ) ,I'm at the point where i require to use the function table.updateData() which requires column id to be existing within the data construction which i can't guarantee as the data are pulled from an unknown source .
is there's a way around this or is there's any alternative way of updating the data later ?
p.s. i only use vanilla javascript not jquery
There needs to be a unique index set on each row of the data in order for Tabulator to know which row you want to refer to.
You can set this to any column field in the row data using the index option in the table constructor
var table = new Tabulator("#example-table", {
index:"age", //set the index field to the "age" field.
});
By default this is set to the id filed
If you want to set this locally you can use a mutator to create a value in this field for you:
//define variable to count index's to ensure they are unique
var index = 0;
//define custom mutator
var idMutator = function(value, data, type, params, component){
//value - original value of the cell
//data - the data for the row
//type - the type of mutation occurring (data|edit)
//params - the mutatorParams object from the column definition
//component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column
return index++; //return the index for the row.
}
//column definition
{field:"id", mutator:idMutator, visible:false}
However if you are updating the data from a remote source then there is no wat to tie that back to the data in your table.
It is standard practice to include an index or unique identifier in the data of this sort to allow syncing between client and server side
Related
I'm receiving data from a websocket (live stream), and trying to put it into a table. I'm currently using the following code:
var table = document.getElementById("websocket-data");
function writeToScreen(message) {
var new_row = table.insertRow(0);
var cell1 = new_row.insertCell(0);
var cell2 = new_row.insertCell(1);
var obj = JSON.parse(message.data);
console.log(obj.value);
cell1.innerHTML = obj.id;
cell2.innerHTML = obj.value;
}
This works, and creates a new row for every JSON packet. The functionality that I am looking for is: On receipt of a JSON, if the id is not in the table, then create a row with id and value, however, if the id is already in the table, simply update the value. I've come across a few ways of doing this, but I'd like to know what the 'proper' way to do it is. I was thinking that perhaps the data should go into an array, and then the array should populate the table, but that would involve repopulating the entire table every time the array changed... I'm happy to use JQuery or similar if necessary.
You could use an array and repopulate the table every time like you said, and if the table will only ever be small then you may not run into issues with that.
One possible alternative of many is maintaining an object in the background with your ids as keys and then store the value and the table row index as values.
Something like:
var tableStore = {};
function recieveMessage(message) {
var obj = JSON.parse(message);
// if the id is not in the tableStore, add it!
if (tableStore[obj.id] === undefined) {
// insert new row into table and save the index into `newTableRowIndex`
// store a blank value (updated below) and the index in the table where it will be displayed
tableStore[obj.id] = {value: undefined, tableIndex: newTableRowIndex};
}
// if the value recieved is different than the stored value, update the row
if (obj.value !== tableStore[obj.id].value) {
tableStore[obj.id].value = obj.value; // store the new value
var row = getTableRow(tableStore[obj.id].tableIndex); // your own function to get the row based on index
// update the row to display the new information
}
}
This could be improved and made to be more organized but you should get the idea.
This way it would only update anything in the display if the new information recieved is different than the old information already stored.
This way should also perform better than using an array would if the table has the potential to get very large as you would not need to search through the entire array every time to see if the id is already stored or not. You would simply access the tableStore entry directly using the id.
I want to filter data on the basis of number of rows and columns provided by user.
I am getting the data on controller after reading this excel file:
this is the column header values which I am getting after user has passed 5 as input columns:
This is the row data which I am getting after user has given 4 rows as input to be rendered, here there is data of 4 rows:
Inside each row, there is key value pair containing column name and the cell value:
I want to filter this row data on the basis of the header names which are coming through column so that the row has only the values till the column is defined. Currently I am getting entire row values.
I have written a logic like this but this is not working.
var rowData=[];
for(var i=0;i<headerNames.length;i++){//headerNames contains column names
for(var j=0;j<data.length;j++){//data contains the rows data
for(var keyName in data[j])
if(angular.equals(keyName,headerNames[i])){
rowData.push({'keyName':data[j][keyName]})//I want only the key,values which matches the column names. I want to set the keyName value as array key but I am not getting its value instead it is coming like keyName:18
}
}
}
}
Adding the plunker for the code.
http://plnkr.co/edit/28Z44xDBug7nFCQnKZJL?p=preview
I am able to filter the data on UI and get only the row and column data as per user input.
But i need the same data on controller, so that i can save it in MongoDb. I want to filter the row data as per the column input. So, that i only get the row data till the column is defined.
Please suggest how can i filter the data and can splice the row values so that in row i can have value upto the column numbers defined. For eg, if I user have entered 4 rows and 5 columns then in my row Data i can have only values upto 5th column and all other values i can remove from array. in my code currently i am not able to get the key value to be set as array key.
Please help me to resolve this problem.
Looks like you're most of the way there. You just need to assign rowData to be $scope.rowData so that angular can get to it, and have the Angular document show {{rowdata}} (shows $scope.rowData).
You'll probably need to arrange it into columns though so you might do a ng-repeat on rowData, with variable=row, and in TR TD tags show row.1
eg something like ..
<tr ng-repeat="row in rowData">
<td>{{row.1}}</td>
<td>{{row.2}}</td>
</tr>
I have two tables A & B, in table B I have a column of type pointer, each field points to a class in table A.
I need to know how to query table B based on the value of a particular field in the pointer column.
So for example, I have 4 objects (records) in table B, and in the pointer column I have pointer1, pointer2, pointer3 and pointer4. So if I want to carry out a query on table B and I want to extract the record with the field value of pointer3 how do I do this in javascript?
Based on your comment I would suggest storing both object IDs for each row. You could use Parse.when(recordA.save(), recordB.save()).then(...) to wait until both finished if you needed to provide feedback in the UI.
An alternative is to just store the object ID for the table B record and in the success handler you'll get back the updated record that'll include the pointer where you can then execute another save. This is slow as it will do two saves in sequence instead of kicking both off at once.
So after a long time searching and looking around and asking questions I figured it out myself in the end. I needed to pass in an object in the query.equalTo method like so:
query.find({
success: function(results) {
var detailsObject = results[0];
detailsObject.set("uuid", uuid);
detailsObject.set("proximity", prox);
detailsObject.set("campaignId", campaignId);
detailsObject.set("location", location);
detailsObject.set("sub_location", subLoc);
detailsObject.save(null, {
success: function(detailsObject) {
var content = Parse.Object.extend("Content");
var contentQuery = new Parse.Query(content);
var id = detailsObject.id;
contentQuery.equalTo("descId", detailsObject);
So "descId" is the pointer column in my content table and rather than trying to query the value in the field (object id of details object), I needed to pass the details object into the query.equalTo
I hope this is of benefit to someone else.
I am initialising a Data Tables table with preset JSON data. I use mData to match the cell values to the columns. I want to get mData in Data tables for a specific cell when I click on any cell. Is there a way to get the mData value using the Data Tables API?
If you already have the values in the DataTable, there is no need to use mData.
You should try an approach like this
$(".datatable tbody td").click(function () {
var position = otable.fnGetPosition(this);
var data = oTable.fnGetData(position[0]);
//get the data of the cell
});
I hacked around it by setting the sClass value to match the mData value and then got that value by using standard JQuery :)
I have create a add record form in extjs which stores user entered data into grid.
Well , if found following method to get form values from formPanel
var formPanel = new Ext.form.FormPanel({...});
var form = formPanel.getForm();
var firstName = form.findField('firstname').getValue();
but i want to covert all the user input value into JSON and want to store into Grid panel and want to send it to the server also. but using findField i have to manually create the array and then need to encode it into JSON , so is there any alternate way to directly read values from form and convert it into JSON and store it into Grid Panel.
When you say "want to store in the GridPanel" would you be updating an existing record in the Grid's store or would you be inserting a new one or both? (depending on whether its add or update probably?)
For such situations, BasicForm (var form in your snippet above) provides updateRecord( Record record ) method.
So your steps would be -
var record = Record.create(...) // in case of insert
OR
var record = //obtain record from grid.getStore() in case of update
Then,
formPanel.getForm().updateRecord(record); //update the passed record with values from the form
Followed by committing the record back to the store-
grid.getStore().add(record); //in case of insert
grid.getStore().commitChanges(); //incase of update
Reference - Ext.form.BasicForm , Ext.data.Record
Define your record type -
MyRecordType = Ext.data.Record.create(['id', 'field1', 'field2']);
var myrec = new MyrecordType();
Now pass myrec to updateRecord as mentioned above.