Jqxdatatable : keep or recover the original names of an HTML table of inputs - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular Data Table, cellsrenderer, Convert, datatable, form submission, html table, input name, inputs, jquery data table, jqxdatatable, name, table, td

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

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

Author

Jqxdatatable : keep or recover the original names of an HTML table of inputs Posts

June 30, 2015 at 1:07 pm Jqxdatatable : keep or recover the original names of an HTML table of inputs #73201

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.

July 1, 2015 at 7:46 am Jqxdatatable : keep or recover the original names of an HTML table of inputs #73229

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/

July 1, 2015 at 1:01 pm Jqxdatatable : keep or recover the original names of an HTML table of inputs #73255

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

Author

Posts

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

You must be logged in to reply to this topic.