jQuery UI Widgets Forums DataTable Jqxdatatable : keep or recover the original names of an HTML table of inputs

This topic contains 2 replies, has 2 voices, and was last updated by  JMBrun 8 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • JMBrun
    Participant

    Hi,
    I’m new with jqwidgets

    I have an html table in a form and the cells of this table are of inputs type the html is constructed in Java via a JSP

    These inputs in the table are submitted by this form when a button is pressed (all fields are submitted with a specific name)

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm

    I am using jqxDataTable plugin to easily replace and customize this HTML Table already constructed on my page and it works well, the right value is in the right cell

    but i lost the name of the input jqxDataTable transforms the inputs in the cell in a simple div and consequently, removes the name of this input, and it is a problem for the submission…

    i use a cellsrendrer, so i can put a new input in the cells of my table but i need to recover the old name and the old id of the input (in the previous HTML table) in order to associate to the new input in the new table (Jqx) and to be able to submit it with the right name

    Is it possible to do this ?

    Your help is much appreciated. Thanks.


    Dimitar
    Participant

    Hi JMBrun,

    After the conversion to jqxDataTable, only the text information from the original HTML table remains. We suggest to put the input name only in the td and later create the input itself in the data table’s cellsRenderer, e.g.:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../sampledata/generatedata.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#table").jqxDataTable(
                {
                    altRows: true,
                    sortable: true,
                    editable: false,
                    selectionMode: 'singleRow',
                    rendering: function () {
                        if ($(".tableInput").length > 0) {
                            $(".tableInput").jqxInput('destroy');
                        }
                    },
                    rendered: function () {
                        if ($(".tableInput").length > 0) {
                            $(".tableInput").jqxInput();
    
                            $(".tableInput").click(function () {
                                this.focus();
                            });
                        }
                    },
                    columns: [
                      { text: 'First Name', dataField: 'First Name', width: 200 },
                      { text: 'Last Name', dataField: 'Last Name', width: 200 },
                      { text: 'Input', dataField: 'Input', width: 250, cellsRenderer: function (row, column, value, rowData) {
                          return '<input class="tableInput" type="text" name="' + value + '" />'
                      }
                      },
                      { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                      { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <table id="table" border="1">
            <thead>
                <tr>
                    <th align="left">
                        First Name
                    </th>
                    <th align="left">
                        Last Name
                    </th>
                    <th align="left">
                        Input
                    </th>
                    <th align="right">
                        Price
                    </th>
                    <th align="right">
                        Quantity
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Ian
                    </td>
                    <td>
                        Devling
                    </td>
                    <td>
                        input1Name
                    </td>
                    <td>
                        $1.75
                    </td>
                    <td>
                        8
                    </td>
                </tr>
                <tr>
                    <td>
                        Nancy
                    </td>
                    <td>
                        Wilson
                    </td>
                    <td>
                        input2Name
                    </td>
                    <td>
                        $5.00
                    </td>
                    <td>
                        3
                    </td>
                </tr>
                <tr>
                    <td>
                        Cheryl
                    </td>
                    <td>
                        Nodier
                    </td>
                    <td>
                        input3Name
                    </td>
                    <td>
                        $2.50
                    </td>
                    <td>
                        4
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    JMBrun
    Participant

    Thanks a lot for your answer,
    i finally find another way (but not very different in fact)

    i use jqxgrid instead of jqxdatatable
    and i follow this demo example :
    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/loadfromtable.htm

    so i create an array of row-objects with the input names
    as it is done in data for the array of data

    and then i use this new array in the cell renderer with an input

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.