I am a beginner with Tabulator.
I have some tables that I need to configure in the same way.
Instead to do for every table the settings like this:
tablename1 = new Tabulator("#tablename1", {
height:370,
pagination:"local",
paginationAddRow:"table",
paginationSize:10,
movableColumns:true,
layout:"fitDataFill",
placeholder:"Nessun dato",
locale:"it-it",
langs:MagoTabulatorLangITA,
ajaxConfig:"POST", //ajax HTTP request type
ajaxContentType:"json",
persistence:{
sort: true, //persist column sorting
group: true, //persist row grouping
columns: true, //persist columns
},
});
}
I wish to have something like:
tablename1 = new Tabulator("#tablename1", {
variable_containing_above_settings,
}
Is it possible?
Thank you very much for your help!
Alberto
if I understand your question you want something like ...
let config = { height: 370, pagination: "local" ... };
new Tabulator("#somedivA",{ height:config.height, pagination: config.pagination, ...} );
new Tabulator("#somedivB",{ height:260, pagination: config.pagination, ...} );
new Tabulator("#somedivC",{ height:config.height, pagination: "remote", ...} );
Related
Wha is the best way to hide empty or null comumns from Yajra Datatables:
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('any.route') }}",
columns: [
// How to Hide any of these columns if its data is empty or null?
// for exampe I want to hide mname column ?
// visible: what condition for example !!!!
{data: 'fname', name: 'fname'},
{data: 'mname', name: 'mname'},
{data: 'lname', name: 'lname'},
....
]
});
How do I hide th in table whenever any data is empty or null. for instance, using visible:, what condition should I use to test if the data: is empty or null
Can I see your controller? I have same issue but I can fix it
Try this in your controller!
public function example(){
if ($request->ajax()) { // if request ajax
$data = User::all(); // take all user table
return Datatables::of($data)
->editColumn('fname', function ($row) { //this example for edit your columns if colums is empty
$fname = !empty($row->name) ? $row->name : 'empty';
return $fname;
})
->make(true);
return view('example', compact('data'));
}}
This is the best way to hide NULL values from the data tables.
$('#leads').DataTable({
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}]
I'm newbie in a OpenBravo ERP system, so I'm sorry if I posted an obvious question.
I have created a custom MDI view in Openbravo ERP, added some input field for filtering product's name in Smarclient's listgrid which contains Orders. I have created a Order datasource and bind it to the Smartclient grid. What I want to achieve is to filter a Order list in the grid by product name which is added in the input text field. I tried with several approaches but without success.
So I came to question is it possible to add join table in AdvancedCriteria in the grid's fetchData function?
Here is a snippet of my code:
isc.ELB_MainView.addProperties({
form: null,
grid: null,
initWidget: function () {
this.grid = isc.OBGrid.create({
setDataSource: function (ds, fields) {
var selectedFields = [],
fs = OB.Constants.FIELDSEPARATOR,
ident = OB.Constants.IDENTIFIER,
fieldNames = ['documentNo', 'documentStatus', 'orderDate', 'accountingDate', 'businessPartner'+fs+ident, 'currency'+fs+ident],
i, j;
for(i = 0; i < fieldNames.length; i++) {
for(j in ds.fields) {
if(ds.fields.hasOwnProperty(j) && j === fieldNames[i]) {
selectedFields.push(ds.fields[j]);
}
}
}
this.Super('setDataSource', [ds, selectedFields]);
this.fetchData();
}
});
this.form = isc.DynamicForm.create({
fields: [{name : "productName",
title: "Product Name",
type : "text",
width: '100%',
change: function(form, item, value, oldValue){
form.main.grid.invalidateCache();
form.main.grid.fetchData({
_constructor: 'AdvancedCriteria',
operator: 'and',
criteria: {
'fieldName': 'orderLineList.product.name',
'operator': 'equals',
'value': value
}
});
this.Super('change', arguments);
}}],
main: this
});
OB.Datasource.get('Order', this.grid, null, true);
this.addMember(this.form);
this.addMember(this.grid);
this.Super("initWidget", arguments);
}
});
Tnx in advance.
Similar question is posted on SmartClient Forum about Joining tables for listgrid datasource.
Here is my solution that will definitely solve your problem:
Create a view that is created by joining tables required for grid and use it as data source
I'm trying to maintain an instantaneous statistics block, e.g.;
model = {
id: 123,
stats: {
fooCount: 117,
barCount: 175,
bazCount: 654
}
}
...and be able to update an existing record, but only specify the new values, like this:
model.update({
'_id': 123,
stats: {
fooCount: 118
}
});
...without blowing away the old values in stats. Is this possible without writing too much more code around my updates?
You should be using a $set operator in your update like so:
var conditions = { _id: 123 };
var update = { $set: { fooCount: 118 }};
var options = { upsert: true };
model.update(conditions, update, options, callback);
There are many more operators that will be of interest on that MongoDB page as well.
I have several records of the same type that I want to show on the screen. I thought about creating several panels that will print the data of each record. I chose this solution because data structure is too complex to be printed in a simple grid. Here is a simplified example of that structure :
{
label: 'myLabel',
{
attr1: 'value1',
attr2: 'value2'
}
startValidityDate: oneDay,
endValidityDate: anotherDay
}
I try to add dynamically nested panels in my current panel :
var myStore = new Ext.data.Store({
id: 'myStore',
restful: true,
idProperty: 'OID',
root: 'tbas',
proxy: myProxy,
reader: myReader,
autoLoad: false,
listeners: {
'load': function(data){
var records = data.getRange();
var currStore = null;
for(var i=0; i<records.length; i++) {
currStore = new Ext.Panel({
layout:'vBox',
items: [{
xtype: 'textfield',
fieldLabel: I18nManager.get('label_ttbaUI_label'),
name: 'tbaLabel',
value: records[i].data.tbaLabel
},{
xtype: 'textfield',
fieldLabel: I18nManager.get('label_ttbaUI_label'),
name: 'tbaOid',
value: records[i].data.tbaoid
}]
});
recordList.add(currStore);
console.log("------------------------------");
console.log(currStore);
}
recordList.doLayout();
}
}
});
var recordList = new Ext.Panel({
id: 'recordList',
renderTo: 'recordPart',
layout:'vBox',
title: I18nManager.get('label_ttbaUI_selected_tariffs')
});
recordList.doLayout();
In the firebug console, the UI objects seems to be ok.
My problem is that the recordList elements are not visible
I can see that they exist in the FB console, but they are not well printed on the screen.
Did I forgot something that make the elements hidden ? or bad printed ?
I'm sure that it is a CSS problem, some trouble with ext-all.css : when I remove the content of that CSS, I can see my fields
There must be something wrong in the way I wrote the code so that it causes the render problem WDYT ???
I have a table using tabulator.
Everything works great, but I am trying to get autocomplete working with Ajax
What I am trying is:
var customerNumbers = [];
var table = new Tabulator("#edi-table",
ajaxURL: baseUrl + '/PaginatedEndPoint',
pagination: "remote",
paginationSize: 30,
paginationSizeSelector: [30, 60, 100, 200],
ajaxSorting: true,
ajaxFiltering: true,
selectable: true,
cellEdited: function (cell) {
cell.getElement().style.backgroundColor = "#32CD32";
},
dataLoading: function () {
customerNumbers = ["11", "12", "13"];
},
columns: [
{
title: "CustomerNumber", field: "CustomerNumber", headerFilter: "input", editor: "autocomplete", editorParams: {
searchFunc: function (term, values) {
var matches = [];
values.forEach(function (item) {
if (item.value === term) {
matches.push(item);
}
});
console.log(matches);
return matches;
},
listItemFormatter: function (value, title) {
return "Mr " + title;
},
values: customerNumbers
}
}
]
However, this does not show any predictions value predictions for me, it seems that autocomplete is built before "dataLoading" or any other Callback (I have tried many) is called.
I have tried to make an auxilary array in the style of values like {Title: "Mr + title", value: "title"} and then assign it in the searchFunc, and it didn't work despite being returned in matches.
Is it even possible to dynamically create autofill?
It seems like the current autocomplete functionality does not allow for the editorParams to take a function as an argument to set the dropdown values. You can set it with an object of key/values if you can send that via AJAX, but as far as dynamically setting, altering, or searching the data, it seems like that's impossible to do at the moment.
The other option would be use the editor:"select", which can take a function to set its editorParams. It's not the best solution, but it's the one I had to go with at the moment.
There is an open issue on the Tabulator docs, but so far no response from the developers.
I wish I had a better answer for you!