Trying to edit client side table - identifier issue

Trying to edit client side table - identifier issue

gwk0gwk0 Posts: 2Questions: 1Answers: 0

I have a simple table created in HTML with three columns, none of which are suitable to be used as a primary key. I gather from the technical note that I need to have a primary key column specified to be able to edit. How do I do this in a pure client side app where I am just working with a table in Javascript? Do I need to create a hidden column or something, and then somehow automatically populate it when loading and when adding new rows?

    editor = new $.fn.dataTable.Editor({
        table: "#example",
        fields: [{
            label: "Goal:",
            name: "goal"
        }, {
            label: "Action Step:",
            name: "action_step"
        }, {
            label: "Start date:",
            name: "start_date",
            type: "datetime"
        }]
    });
    
    $('#example').DataTable( {
        dom: "Bfti",
        "paging": false,
        "order": [[ 2, "asc" ]],
        columns: [
            { data: "goal" },
            { data: "action_step" },
            { data: "start_date" }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    });
        <table id="example" class="table table-striped table-bordered display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Goal</th>
                        <th>Action Step</th>
                        <th>Start date</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Success</td>
                        <td>Get success first</td>
                        <td>2010/04/25</td>
                    </tr>
                    <tr>
                        <td>Success</td>
                        <td>Get success</td>
                        <td>2011/04/25</td>
                    </tr>
                    <tr>
                        <td>Success</td>
                        <td>Get success at last</td>
                        <td>2012/04/25</td>
                    </tr>
                    <tr>
                        <td>Success</td>
                        <td>Get success</td>
                        <td>2011/04/25</td>
                    </tr>
                </tbody>
            </table>

Answers

  • allanallan Posts: 63,836Questions: 1Answers: 10,518 Site admin

    Hi,

    While this is a Javascript app, is there some kind of permanent storage for the data somewhere - i.e. somewhere that the table's data, once edited, will be saved when the user clicks a button?

    If so, does that data store have a primary key column?

    If not, then the id doesn't matter too much - just have either a randomly generated value for the id attribute in the table tr elements, or have a randomly generated value in a hidden column.

    Allan

  • gwk0gwk0 Posts: 2Questions: 1Answers: 0

    Excellent, that allowed me to edit an existing record and delete one. I presume there'll be a hook for the add process that will allow me to assign an ID - will go hunting...

  • allanallan Posts: 63,836Questions: 1Answers: 10,518 Site admin

    I presume there'll be a hook for the add process that will allow me to assign an ID - will go hunting...

    Actually no... At least not yet. See the latter part of this thread for discussion on that.

    Allan

This discussion has been closed.