Inline editing on a DOM sourced table

Floriane

Hi,

I try to merge the two examples below :
http://editor.datatables.net/examples/advanced/htmlTable.html
http://editor.datatables.net/examples/inline-editing/simple.html

What I want to do is transforming an HTML table into Editor and activate the inline editing, and editing via checkbox.
But I have a problem with that...

Suppose we have the HTML table below :

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>id</th>
            <th>nom</th>
            <th>prenom</th>
            <th>age</th>
            <th>sexe</th>
            <th>poste</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_1">
            <td>1</td>
            <td>Dupont</td>
            <td>Paul</td>
            <td>32</td>
            <td>M</td>
            <td>Secrétaire</td>
        </tr>
        <tr id="row_2">
            <td>2</td>
            <td>Rodriguez</td>
            <td>Sandrac</td>
            <td>48</td>
            <td>F</td>
            <td>CEO</td>
        </tr>
        <tr id="row_3">
            <td>3</td>
            <td>Dupont</td>
            <td>Rémi</td>
            <td>45</td>
            <td>M</td>
            <td>Manager</td>
        </tr>
        <tr id="row_4">
            <td>4</td>
            <td>Joice</td>
            <td>Florent</td>
            <td>29</td>
            <td>M</td>
            <td>Secrétaire</td>
        </tr>
        <tr id="row_5">
            <td>5</td>
            <td>Renard</td>
            <td>Sylvia</td>
            <td>36</td>
            <td>F</td>
            <td>Manager</td>
        </tr>
        <tr id="row_6">
            <td>6</td>
            <td>Plaie</td>
            <td>Anette</td>
            <td>25</td>
            <td>F</td>
            <td>Comptable</td>
        </tr>
        <tr id="row_7">
            <td>9</td>
            <td>Beli</td>
            <td>Naomi</td>
            <td>35</td>
            <td>F</td>
            <td>Graphiste</td>
        </tr>
    </tbody>
</table>

And the javascript below :

var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function() {
        
        // Set up the editor
        editor = new $.fn.dataTable.Editor( {
            table: '#example',
            fields: 
            [ {
                label: 'id:',
                name: 0
            }, {
                label: 'nom:',
                name: 1
            }, {
                label: 'prenom:',
                name: 2
            }, {
                label: 'age:',
                name: 3
            }, {
                label: 'sexe:',
                name: 4
            }, {
                label: 'poste:',
                name: 5
            }
        ],
            ajax: function ( method, url, data, successCallback, errorCallback ) {
                ...
            }        
        });

  
        // Activate an inline edit on click of a table cell
        $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this );
        } );

        // Initialise the DataTable
        var table = $('#example').DataTable( {
            dom: "Tfrtip",
            columns: [
                { data: null, defaultContent: '', orderable: false },
                { data: "0" },
                { data: "1" },
                { data: "2" },
                { data: "3" },
                { data: "4" },
                { data: "5" }
            ],       
            tableTools: {
                sRowSelect: "os",
                aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor }
                ]
            }
        } );
    });

My HTML table has a problem because it has 7 header cols and the body has 6 cols. So my table is badly generated. But if I add the missing column, the table isn't generated, and I have this error :

Quoted TypeError: col is undefined

But I don't know where I'm supposed to declare this undefined column, or what is false in my code.

Does anyone can help me ?

Thank you.

allan

There are a couple of things going on here I think. Firstly, in your table header you have 7 columns. In your tbody body, the rows each only have 6 columns. I would suggest changing that so they all have 7. Then you don't need the columns array any more.

Allan

Floriane

Thank you Allan,

I've made the changes you've said. I can select the rows with the first column but there is no checkbox.
In your exemple http://editor.datatables.net/examples/inline-editing/simple.html, there is checkboxes. Are they integrated to DataTable, or should I to add them ?

Floriane

It seems that checkbox line selection system is implement in Editor, but I didn't find how to do that.
Like in this example : http://editor.datatables.net/examples/inline-editing/simple.html

Does someone know how to do that ?

My HTML :

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>id</th>
            <th>nom</th>
            <th>prenom</th>
            <th>age</th>
            <th>sexe</th>
            <th>poste</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_1">
            <td></td>
            <td>1</td>
            <td>Dupont</td>
            <td>Paul</td>
            <td>32</td>
            <td>M</td>
            <td>Secrétaire</td>
        </tr>
        <tr id="row_2">
            <td></td>
            <td>2</td>
            <td>Rodriguez</td>
            <td>Sandrac</td>
            <td>48</td>
            <td>F</td>
            <td>CEO</td>
        </tr>
        <tr id="row_3">
            <td></td>
            <td>3</td>
            <td>Dupont</td>
            <td>Rémi</td>
            <td>45</td>
            <td>M</td>
            <td>Manager</td>
        </tr>       
    </tbody>
</table>

And for my javascript :

var editor; // use a global for the submit and return data rendering in the examples
 
    $(document).ready(function() {
         
        // Set up the editor
        editor = new $.fn.dataTable.Editor( {
            table: '#example',
            fields: 
            [ {
                label: 'id:',
                name: 1
            }, {
                label: 'nom:',
                name: 2
            }, {
                label: 'prenom:',
                name: 3
            }, {
                label: 'age:',
                name: 4
            }, {
                label: 'sexe:',
                name: 5
            }, {
                label: 'poste:',
                name: 6
            }
        ],
            ajax: function ( method, url, data, successCallback, errorCallback ) {
                ...
            }       
        });
 
   
        // Activate an inline edit on click of a table cell
        $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
            editor.inline( this );
        } );
 
        // Initialise the DataTable
        var table = $('#example').DataTable( {
        dom: "Tfrtip",        
        order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor }
            ]
        }
    } );
    });

allan

Have you included Font Awesome and the CSS required for the checkboxes (click the CSS tab below the table in the example you linked to)?

Allan

Floriane

... ok I'm really really stupid ! >< Thank you Allan, everything works fine !