Inline/Row edit on server side processing

Inline/Row edit on server side processing

Andy@GAOAndy@GAO Posts: 16Questions: 3Answers: 0
edited May 2017 in Free community support

I have this code:

<link rel="stylesheet" type="text/css" href="~/Content/DataTables/css/jquery.dataTables.css">
<link type="text/css" href="~/Content/DataTables/css/dataTables.checkboxes.css" rel="stylesheet" />

...
        $('#editable').DataTable(
            ).$('td').editable('', {
            "callback": function( sValue, y ) {
                var aPos = oTable.fnGetPosition( this );
                oTable.fnUpdate( sValue, aPos[0], aPos[1] );
            },
            "submitdata": function ( value, settings ) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oTable.fnGetPosition( this )[2]
                };
            },
        });

        $('#metrictargetlist').DataTable({
            "bProcessing": true,
            "bServerSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
            "ajax": {
                "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Tables/GetMetricTargetList",
                "type": "POST",
                "dataType": 'json',
            },
            "columns": [
            { "data": "MetricID", "orderable": false },
            { "data": "metricDesc", "orderable": false },
            { "data": "calcType", "orderable": false },
            { "data": "aimDirection", "orderable": false },
            { "data": "targetSet", "orderable": false }
            ],
            "buttons": [
            {
                "extend": 'edit',
                "editor": 'Editor'
            }        ]
        });

                    <table class="table table-striped table-bordered table-hover " id="editable">
                        <thead>
                            <tr>
                                <th>Rendering engine</th>
                                <th>Browser</th>
                                <th>Platform(s)</th>
                                <th>Engine version</th>
                                <th>CSS grade</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="gradeX">
                                <td>Trident</td>
                                <td>
                                    Internet
                                    Explorer 4.0
                                </td>
                                <td>Win 95+</td>
                                <td class="center">4</td>
                                <td class="center">X</td>
                            </tr>
                            <tr class="gradeC">
                                <td>Trident</td>
                                <td>
                                    Internet
                                    Explorer 5.0
                                </td>
                                <td>Win 95+</td>
                                <td class="center">5</td>
                                <td class="center">C</td>
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Rendering engine</th>
                                <th>Browser</th>
                                <th>Platform(s)</th>
                                <th>Engine version</th>
                                <th>CSS grade</th>
                            </tr>
                        </tfoot>
                    </table>

                    <div class="ibox-content">
                        <table id="metrictargetlist" class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Metric Name</th>
                                    <th>Calc. Type</th>
                                    <th>Aim L/H</th>
                                    <th>Targets Set</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>Id</th>
                                    <th>Metric Name</th>
                                    <th>Calc. Type</th>
                                    <th>Aim L/H</th>
                                    <th>Targets Set</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

I have 2 tables, editable and metrictargetlist
The 1st one works and I can edit inline, the 2nd one (metrictargetlist) does not work.
I've included the relevant files but I can't get the edit buttons to appear or initiate in-line editing.

I saw on another post somebody not including js files, I've included these:

https://code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js
https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js
https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js

Am I doing something obviously wrong here?

Help would be much appreciated.

Andy

This question has an accepted answers - jump to answer

Answers

This discussion has been closed.