I don't have many more ideas on how to make the datepicker work. Does it not trigger "change" on the text input? Does it have it's own event that you can capture like above? You might just resort to requiring a button click submission for that element. (using 'submit': 'Ok', )
In regard to making the whole row editable: if you want to go that route, you probably just want to roll your own code rather than use jeditable. Someone can correct me if I'm wrong, but I don't think there's a convenient way to do this with jeditable, which is intended to make a single DOM element editable, then process that element.
In addition to that, if you were editing the whole row you probably want to send the whole row's data to your update script, rather than send them one at a time, which is the jeditable update model.
jEditable is in place editing on a single element only. There is an example of how to roll your own full row editing here: http://datatables.net/blog/Inline_editing .
thanks for the information guys. jEditable is working for now the way I have it setup. I will take a look at this other method and see how difficult it would be to roll my own and decide based on that :)
I am thinking I will have to go with a save button for the date elements as well.
sorry just one more question I know i've been a nuisance :D
Currently I have my datatable sizing the columns by % of real estate on the screen. when I edit the date column what I would like to do is make every column smaller so I can make the date column wider, once saved have it go back to the original size. Is this possible to do or would it be quite a lot of work?
Is there a good example or document which explains aoColumnDefs in depth so that I know what can go where etc. I tried looking at examples but they all seem to have different properties and do not outline all available options, etc.
As stated above currently I am using aoColumns with the width set to a % in the table HTML. I would rather be able to specify an exact pixel width and when editing have custom code to change all other column widths etc.
thanks for the information on full row editing, my boss would prefer that method so here goes the custom rolling :D
I took a look and wish I knew enough about JS and JQuery I would take this time to roll out a plugin for this row editing. However after looking it appears I still have quite a bit to learn :)
> ugh i cannot have row editing when bServerSide: true for some reason :(
My example wasn't design with server-side processing in mind, but it should be possible to readily adapt it for server-side processing. What aspect of it isn't working?
> Is there a good example or document which explains aoColumnDefs in depth so that I know what can go where etc
http://www.datatables.net/usage/columns - all of the options that can be used in aoColumns can also be used in aoColumnDefs. This page lists all possible options.
you'd need to code your own handler for the button that basically just makes an ajax call to a server script, maybe handles success and failure of that script
[code]$('#yourbutton').click(function() {
$.ajax(updateurl, {
// other .ajax() settings, .i.e. if POST, if you want async, what to do on success, error, etc.
};
});[/code]
see http://api.jquery.com/jQuery.ajax/ or look to examples in fnServerData http://www.datatables.net/ref#fnServerData
and you'll need to write a server side script that takes your data, maybe do some rudimentary data checking, then compose an UPDATE query, check status of that query.
correct I would have to write my own ajax handlers but clicking the add new row button should add a new row to the table on the client side, as well as clicking edit should change the columns to text fields. However with my implementation this was not the case. In order to get the add new row link to work I had to set bServerSide: false.
I actually have been working with this a bit more and started from scratch and it appears that it does work with bServerSide: true so I am not sure why the first time it failed and worked when I switched it, maybe another component I was using was also conflicting?
I am going to work on this from scratch to see if I can get it to work properly.
aoColumnDefs much as "aTargets" as a parameter for each object entry in the array. Otherwise it wouldn't know what column to apply the definition to. That's the only difference between aoColumns and aoColumnDefs.
another question. In the in-line editing code you have the following in the saveRow function.
[code]
var nRow = $(this).parents('tr')[0];
[/code]
This returns an [object HTMLTableRowElement]. How can I get the ID attribute from that row element is it possible? I tried nRow.attr('id'); but it complained that attr was not a method :)
If you have to define something for every column, then its easier to use aoColumns. If however you don't need to defined something for every column then aoColumnDefs is easier (and also suitable for cases where tables can be a flexible number of columns since it can target by class as well).
> How can I get the ID attribute from that row element
[code]
nRow.id
[/code]
You were trying to use a jQuery function on a node.
[code]
var id = $(this).parents('tr').attr('id');
[/code]
Also I have the following code for my editing. My question is how can I determine the value of the column when I click Edit? I need to make the proper option element be selected.
hmm can columns have id's as well? I could just set the id for the column to the integer representing the string so that I can fetch the integer to make the proper one selected.
I also have to say that column 0 (edit link) and column 3 (promo_code, not sent in ajax) are not editable which is why you see the different indexes in the code above.
The main issue is I need to somehow attach and id number to the column which shows the select element so that I can have that item selected in the select element when it becomes active during edit. I am not sure adding it as a class would be the best possible method.
but also still having the issue with RestoreRow too.
Replies
In regard to making the whole row editable: if you want to go that route, you probably just want to roll your own code rather than use jeditable. Someone can correct me if I'm wrong, but I don't think there's a convenient way to do this with jeditable, which is intended to make a single DOM element editable, then process that element.
In addition to that, if you were editing the whole row you probably want to send the whole row's data to your update script, rather than send them one at a time, which is the jeditable update model.
Allan
I am thinking I will have to go with a save button for the date elements as well.
I have tried the following
[code]
$(".dataTable .datepicker button").each(function(element) {
element.button();
});
[/code]
[code]
$(".dataTable .datepicker button").button();
[/code]
[code]
$(".datepicker").live("focus", function() {
var options = {
dateFormat: "yy-mm-dd",
onSelect: function(dateText, event) {
$(event.target).trigger('blur');
}
};
$('input', this).datepicker(options);
$('button', this).button();
});
[/code]
Currently I have my datatable sizing the columns by % of real estate on the screen. when I edit the date column what I would like to do is make every column smaller so I can make the date column wider, once saved have it go back to the original size. Is this possible to do or would it be quite a lot of work?
Is there a good example or document which explains aoColumnDefs in depth so that I know what can go where etc. I tried looking at examples but they all seem to have different properties and do not outline all available options, etc.
As stated above currently I am using aoColumns with the width set to a % in the table HTML. I would rather be able to specify an exact pixel width and when editing have custom code to change all other column widths etc.
thanks for the information on full row editing, my boss would prefer that method so here goes the custom rolling :D
I took a look and wish I knew enough about JS and JQuery I would take this time to roll out a plugin for this row editing. However after looking it appears I still have quite a bit to learn :)
My example wasn't design with server-side processing in mind, but it should be possible to readily adapt it for server-side processing. What aspect of it isn't working?
> Is there a good example or document which explains aoColumnDefs in depth so that I know what can go where etc
http://www.datatables.net/usage/columns - all of the options that can be used in aoColumns can also be used in aoColumnDefs. This page lists all possible options.
Allan
I was still tinkering with it and was not able to get the edit links to actually work at all, they complained about aaData[i] not existing, etc.
The add row button however worked once I set bServerSide to be false. With it set to true the row was not added to the table.
[code]$('#yourbutton').click(function() {
$.ajax(updateurl, {
// other .ajax() settings, .i.e. if POST, if you want async, what to do on success, error, etc.
};
});[/code]
see http://api.jquery.com/jQuery.ajax/ or look to examples in
fnServerData http://www.datatables.net/ref#fnServerData
and you'll need to write a server side script that takes your data, maybe do some rudimentary data checking, then compose an UPDATE query, check status of that query.
correct I would have to write my own ajax handlers but clicking the add new row button should add a new row to the table on the client side, as well as clicking edit should change the columns to text fields. However with my implementation this was not the case. In order to get the add new row link to work I had to set bServerSide: false.
I actually have been working with this a bit more and started from scratch and it appears that it does work with bServerSide: true so I am not sure why the first time it failed and worked when I switched it, maybe another component I was using was also conflicting?
I am going to work on this from scratch to see if I can get it to work properly.
[code]
"aoColumnDefs": [
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
},
{
"sWidth": "200px"
}
],
[/code]
Allan
[code]
"aoColumnDefs": [
{
"aTargets": [0,1,2],
"sWidth": "200px"
},
{
"aTargets": [3,4,5],
"sWidth": "100px"
},
{
"aTargets": [6,7,8,9]
"sWidth": "150px"
}
],
[/code]
Note I have 9 columns. I am just trying to figure out if I need one object for each column or if combining them like this would work.
[code]
var nRow = $(this).parents('tr')[0];
[/code]
This returns an [object HTMLTableRowElement]. How can I get the ID attribute from that row element is it possible? I tried nRow.attr('id'); but it complained that attr was not a method :)
> How can I get the ID attribute from that row element
[code]
nRow.id
[/code]
You were trying to use a jQuery function on a node.
[code]
var id = $(this).parents('tr').attr('id');
[/code]
would also work.
Allan
Any idea why when I click Save the last column ALWAYS remains a text field?
Also I have the following code for my editing. My question is how can I determine the value of the column when I click Edit? I need to make the proper option element be selected.
[code]
function editRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = 'Save';
var selectMenu = '';
for(x = 0; x <= (promoTypes.length - 1); x++) {
selectMenu += ''+promoTypes[x].name+'';
}
selectMenu += '';
jqTds[1].innerHTML = selectMenu;
jqTds[2].innerHTML = (aData[2]) ? '' : '';
jqTds[4].innerHTML = (aData[4]) ? '' : '';
jqTds[5].innerHTML = (aData[5]) ? '' : '';
jqTds[6].innerHTML = (aData[6]) ? '' : '';
jqTds[7].innerHTML = (aData[7]) ? '' : '';
jqTds[8].innerHTML = (aData[8]) ? '' : '';
jqTds[9].innerHTML = (aData[9]) ? '' : '';
}
[/code]
[code]
function restoreRow ( oTable, nRow )
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for ( var i=0, iLen=jqTds.length ; i
The main issue is I need to somehow attach and id number to the column which shows the select element so that I can have that item selected in the select element when it becomes active during edit. I am not sure adding it as a class would be the best possible method.
but also still having the issue with RestoreRow too.