plugin for forms?
plugin for forms?
Hi!
I often encounter the case, that I have a table where each column corresponds to a field of a new entry form.
Therefore, there I display a form for creating such a new entry right under the table headings.
Of course, you can write the form somewhere near the table, adding the records by events (that's what I will do anyways, as I store data server side). But then, the form would not remain in the table. But this is exacetly what I like, because users see directly where the data will be put in.
So is there a plugin for that or did someone else this already?
regards, Alex
I often encounter the case, that I have a table where each column corresponds to a field of a new entry form.
Therefore, there I display a form for creating such a new entry right under the table headings.
Of course, you can write the form somewhere near the table, adding the records by events (that's what I will do anyways, as I store data server side). But then, the form would not remain in the table. But this is exacetly what I like, because users see directly where the data will be put in.
So is there a plugin for that or did someone else this already?
regards, Alex
This discussion has been closed.
Replies
[code]
$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
{"bSortable": null},
null,
{"bSortable": null}
],
"aaData": [
[1, 19, "percental", "2%", ' '],
]
} );
} );
Qty from
to
rebate type
value
actions
percental
absolute
[/code]
Problems:
a) I have to ship the html code for the edit and delete buttons with the data. I don't like that, because I generate data server side. Designers usually don't have access to what I do server side, so they cannot style these buttons.
b) Somehow, the sorting buttons and bindings are present in both table heading rows. I only want them to display in the first table heading, where the labels (the text) are.
hth, Alex
I think what you are looking for is the fnAddData API function ( http://datatables.net/api#fnAddData ) - example: http://datatables.net/examples/api/add_row.html . With this you can take the information from the form input and add it into the table.
a. You could use fnRender() - http://datatables.net/usage/columns#fnRender - to create the HTML for your buttons on the client-side if you wish.
b. Use 'td' elements rather than 'th', and that will stop DataTables binding event listeners to your header elements. The other option is simply to unbind the 'click' event listener.
Regards,
Allan
Thanks a lot for your answer.
I more question arises: Can I have columns rendered, that aren't supplied with the data?
cf. this code:
[code]
$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
null,
{"bSortable": null},
null,
{
"fnRender": function ( oObj ) {
return ' ';
} },
],
"aaData": [
[19, "percental", "2%", ''],
]
} );
} );
Qty from
rebate type
value
actions
percental
absolute
[/code]
There is four rows, defined in the html code. In order to not get a popup for each row in aaData, that there are less columns in the data than in the table, I have to set up an empty value in aaData at the place where I will insert the data.
Is there any other way? Maybe to define a column as not filled by aaData? It would not be tragic if not, I'm just curious.
No, I'm afraid there is no other way. The number of elements in the arrays in aaData must exactly match the number of columns in the table. The reason for this is that if we allowed left (say 2, or in this case 3), which columns should DataTables add blank data to? It's must more flexible for the developer to be explicit like this. The other thing would be that if your render function required data from the column, it would need to be added there - it's not in this case, but it might be in others.
So long and short, the added data must exactly match the number of columns :-)
Regards,
Allan