Inline editing on a DOM sourced table

Inline editing on a DOM sourced table

FlorianeFloriane Posts: 22Questions: 6Answers: 0
edited July 2014 in Free community support

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 56,444Questions: 1Answers: 8,957 Site admin

    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

  • FlorianeFloriane Posts: 22Questions: 6Answers: 0

    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 ?

  • FlorianeFloriane Posts: 22Questions: 6Answers: 0
    edited July 2014

    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 }
                ]
            }
        } );
        });
    
  • allanallan Posts: 56,444Questions: 1Answers: 8,957 Site admin
    Answer ✓

    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

  • FlorianeFloriane Posts: 22Questions: 6Answers: 0

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

This discussion has been closed.