Turning table cells into form controls, cleanly?
Turning table cells into form controls, cleanly?
Hey,
I have a DataTables table populated with JSON data from a server-side CGI. A few of the columns in this table need to be form controls: two dropdown menus, and one an input-type text field.
Looking at this problem I saw two obvious ways to do it: 1) create the markup server-side and include the form-control markup in the JSON data, or 2) loop over the data (either the JSON or the DataTables table) and modify it in place using standard jQuery methods. Neither of these seem particularly clean ways to do it. The first requires me to pollute the JSON datawhich is otherwise pure data, no markupand the second adds a lot of code and a (potentially) high-iteration count loop client-side.
So thinking a bit more about it I'm leaning in the direction that this would conceptually fit best as a feature of DataTables itself. The pure JSON data is fed to DataTables which in turn processes it in various ways for display and interaction: data type detection, visibility of columns, sorting, etc. One more thing that DataTables could do would be to support a data type that is a form control. For an input-type control this would maybe just be using jEditable to make it editable; but for a select-type control the behaviour would be to use the JSON data to set the 'selected' attribute of the matching 'option'. For a 'button'-type control you could, for instance, let DataTables automatically enable or disable it based on whether the user has altered any of the other form controls in the table (i.e. a 'Save' button for that row).
A quick scan of the API docs for DataTables suggests it would be possible to do the make table fields into form controls part of this in a plugin, but I didn't see any obvious way to do the turn pure JSON data into form controls in some table cells part of it (well, the transformation part of it, but not with any intelligence; DataTables would still treat it as opaque data after the transform).
For the particular project I'm working on I'll probably end up just polluting the JSON data with markup just to get it working, but the problem seems like it would be a common one and I predict running into it again in future projects, so I'm hoping to find a clean way to do it long term.
What do you think about this conceptually? Is my thinking on this sound, in that DataTables would be the right place to handle this functionality (e.g. in terms of a MVC-model and similar)? Would a plugin be able to do this with the existing plugin API for DataTables? Or am I right that to make form controls a first-class citizen (rather than opaque data) is required to let DataTables deal with such data intelligently?
Also, Google revealed loads of jQuery plugins for working with forms in various ways, but none of them seemed to fit into this problem; mostly, I suspect, because the problem as stated isn't so much one of forms as it is about tables+forms. But if I missed something I would certainly appreciate tips about existing plugins that would be a good fit here.
Anyways, this is somewhere between a feature request and me thinking out loud to get feedback on the idea. I'm equally interested in getting feeback on whether my thinking is conceptually sound (in terms of patterns, separation of concerns, models, etc.) as discussion of it as a feature request for DataTables (i.e. it isn't hard to just find some way to make this /work/, but I ran into trouble finding a way to make this work /right/).
TIA,
xover
I have a DataTables table populated with JSON data from a server-side CGI. A few of the columns in this table need to be form controls: two dropdown menus, and one an input-type text field.
Looking at this problem I saw two obvious ways to do it: 1) create the markup server-side and include the form-control markup in the JSON data, or 2) loop over the data (either the JSON or the DataTables table) and modify it in place using standard jQuery methods. Neither of these seem particularly clean ways to do it. The first requires me to pollute the JSON datawhich is otherwise pure data, no markupand the second adds a lot of code and a (potentially) high-iteration count loop client-side.
So thinking a bit more about it I'm leaning in the direction that this would conceptually fit best as a feature of DataTables itself. The pure JSON data is fed to DataTables which in turn processes it in various ways for display and interaction: data type detection, visibility of columns, sorting, etc. One more thing that DataTables could do would be to support a data type that is a form control. For an input-type control this would maybe just be using jEditable to make it editable; but for a select-type control the behaviour would be to use the JSON data to set the 'selected' attribute of the matching 'option'. For a 'button'-type control you could, for instance, let DataTables automatically enable or disable it based on whether the user has altered any of the other form controls in the table (i.e. a 'Save' button for that row).
A quick scan of the API docs for DataTables suggests it would be possible to do the make table fields into form controls part of this in a plugin, but I didn't see any obvious way to do the turn pure JSON data into form controls in some table cells part of it (well, the transformation part of it, but not with any intelligence; DataTables would still treat it as opaque data after the transform).
For the particular project I'm working on I'll probably end up just polluting the JSON data with markup just to get it working, but the problem seems like it would be a common one and I predict running into it again in future projects, so I'm hoping to find a clean way to do it long term.
What do you think about this conceptually? Is my thinking on this sound, in that DataTables would be the right place to handle this functionality (e.g. in terms of a MVC-model and similar)? Would a plugin be able to do this with the existing plugin API for DataTables? Or am I right that to make form controls a first-class citizen (rather than opaque data) is required to let DataTables deal with such data intelligently?
Also, Google revealed loads of jQuery plugins for working with forms in various ways, but none of them seemed to fit into this problem; mostly, I suspect, because the problem as stated isn't so much one of forms as it is about tables+forms. But if I missed something I would certainly appreciate tips about existing plugins that would be a good fit here.
Anyways, this is somewhere between a feature request and me thinking out loud to get feedback on the idea. I'm equally interested in getting feeback on whether my thinking is conceptually sound (in terms of patterns, separation of concerns, models, etc.) as discussion of it as a feature request for DataTables (i.e. it isn't hard to just find some way to make this /work/, but I ran into trouble finding a way to make this work /right/).
TIA,
xover
This discussion has been closed.
Replies
I think this sounds like an ideal case for fnRender ( http://datatables.net/usage/columns#fnRender ). This will take the data you feed to the table and process the string as you require (adding a form field for example). If you were to combine this with the new data source options in DataTables 1.8 (currently beta - although not for much longer... :-) ) you could indeed base the formatting on other attributes in the data source object ( http://datatables.net/blog/Extended_data_source_options_with_DataTables ). An alternative would be to attach a class of, say, 'number' to the TH element for the column, and use aoColumnDefs to target a given rendering function at that column.
You might also be interested in this post: http://datatables.net/blog/Inline_editing and this example: http://datatables.net/examples/api/form.html
Regards,
Allan