plugin for forms?

plugin for forms?

nm_alexnm_alex Posts: 26Questions: 0Answers: 0
edited November 2009 in Plug-ins
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

Replies

  • nm_alexnm_alex Posts: 26Questions: 0Answers: 0
    Note: Here is a somewhat realistic case with some code. It's a form for sliding prices (I think that is the term).

    [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
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    Hi 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
  • nm_alexnm_alex Posts: 26Questions: 0Answers: 0
    Hi 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.
  • allanallan Posts: 55,045Questions: 1Answers: 8,638 Site admin
    Hi Alex,

    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
This discussion has been closed.