Need for editable's aoColumns number to change dynamically
Need for editable's aoColumns number to change dynamically
My problem is that when the initial datatable loads there are 8 columns, one of which contains links to another page that reuses that same datatable. Only when the link is clicked one of the columns from the table is removed, therefore moving all of my editable properties over by one cell (to make up for the now missing column.
Here is a sample of my code:
$(selector).dataTable().makeEditable({
sUpdateURL: url,
"aoColumns": [
null,
null,
null,
null,
{
event: 'click',
onblur: function(value, settings) {
this.reset(value);
$(this).html(value);
App.startEvents(selector);
return value;
},
callback: function(value, settings) {
if($(this).html().indexOf("<") === -1) {
App.startEvents(selector);
}
},
data: function(value, settings) {
App.stopEvents($(this));
return App.fieldData(value);
},
onreset: function(value, settings) {
App.startEvents(selector);
},
oValidationOptions : {
rules: {
value: {
required: true,
date: true
}
}
}
},
null
]
});
Basically I want to be able to remove one of the null's when the number of columns for the table changes.
Something like if (numOfColumns == 8) leave the null there else remove the null.
This code is trimmed from my original, but should hopefully give you an idea of my situation.
Thanks in advance for any help.
Jake
Here is a sample of my code:
$(selector).dataTable().makeEditable({
sUpdateURL: url,
"aoColumns": [
null,
null,
null,
null,
{
event: 'click',
onblur: function(value, settings) {
this.reset(value);
$(this).html(value);
App.startEvents(selector);
return value;
},
callback: function(value, settings) {
if($(this).html().indexOf("<") === -1) {
App.startEvents(selector);
}
},
data: function(value, settings) {
App.stopEvents($(this));
return App.fieldData(value);
},
onreset: function(value, settings) {
App.startEvents(selector);
},
oValidationOptions : {
rules: {
value: {
required: true,
date: true
}
}
}
},
null
]
});
Basically I want to be able to remove one of the null's when the number of columns for the table changes.
Something like if (numOfColumns == 8) leave the null there else remove the null.
This code is trimmed from my original, but should hopefully give you an idea of my situation.
Thanks in advance for any help.
Jake
This discussion has been closed.
Replies
I was able to create an array of objects to store my jedtiable settings and then I just called that array variable as my "aoColumns" parameter.
So you can say something like var editables = [null, null, null]; (or however many nulls you want).
Then I placed an if statement to check how many columns were currently visible.
Depending on what you want to happen on result of that if statement, you can continue to push objects into the array like so:
editables.push({event: 'click',
type: 'select',
change: 'submit',
data: "{' Option1' : 'Option1', 'Option2' : 'Option2', 'selected' : 'Option1' }"
});
editables.push({ another object }) ;
editables.push({ more nulls maybe?, repeat this for as many columns you need });
Once you have your array setup with all the variables necessary, you can call it inside of the makeeditable() call.
i.e. $(selector).datatable().makeeditable({
sUpdateUrl : url
"aoColumns" : editables
});
Now if your page reuses a datatable but the columns are growing and shrinking, the editable settings should re adjust appropriately.
Hope this helps someone else someday!
Jake