How I can fix first column?

trebmal

Hello,

I created the code with "The generator", because I have little knowledge of js.

I've the following error "DataTables warning: table id=vehicles - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"

I've read de documentation about this error and I know that provides from double initialisation the but after several attempts, I'm unable to find the correct solution. I'm only want to fix first column in a datatable editor.

This is the debug: http://debug.datatables.net/aheqiy.

This is my code:

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {

        "ajax": "php/table.vehicles.php",
        "table": "#vehicles",
        "fields": [
            {
                "label": "matricula",
                "name": "matricula"
            },
            {
                "label": "id_personal",
                "name": "id_personal"
            },
            {
                "label": "model",
                "name": "model"
            },
            {
                "label": "renting",
                "name": "renting"
            },
            {
                "label": "inici_renting",
                "name": "inici_renting"
            },
            {
                "label": "final_renting",
                "name": "final_renting"
            },
            {
                "label": "quota",
                "name": "quota"
            },
            {
                "label": "asseguran\u00e7a",
                "name": "asseguranca"
            },
            {
                "label": "inici_ass",
                "name": "inici_ass"
            },
            {
                "label": "final_ass",
                "name": "final_ass",
                "type": "date",
                "dateFormat": "dd\/mm\/y"
            },
            {
                "label": "quota_ass",
                "name": "quota_ass"
            },
            {
                "label": "franquicia",
                "name": "franquicia"
            },
            {
                "label": "pag_fran",
                "name": "pag_fran"
            },
            {
                "label": "proper_itv",
                "name": "proper_itv"
            }
        ]
    } );


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


        $(document).ready(function() {
            var table = $('#vehicles').DataTable( {
                scrollY:        "300px",
                scrollX:        true,
                scrollCollapse: true,
                paging:         false
            } );
            new $.fn.dataTable.FixedColumns( table );
        } );

    
              $('#vehicles').DataTable( {

        "dom": "Tfrtip",
        "ajax": "php/table.vehicles.php",
        "scrollX": "100%",


                        "columns": [
            {
                "data": "matricula"
            },
            {
                "data": "id_personal"
            },
            {
                "data": "model"
            },
            {
                "data": "renting"
            },
            {
                "data": "inici_renting"
            },
            {
                "data": "final_renting"
            },
            {
                "data": "quota"
            },
            {
                "data": "asseguranca"
            },
            {
                "data": "inici_ass"
            },
            {
                "data": "final_ass"
            },
            {
                "data": "quota_ass"
            },
            {
                "data": "franquicia"
            },
            {
                "data": "pag_fran"
            },
            {
                "data": "proper_itv"
            }
        ],

        "tableTools": {
            "sRowSelect": "os",
            "sRowSelector": 'td:first-child',
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }
    } );

} );

}(jQuery));

tangerine

The error means what it says: you can't reinitialise DataTable.

            var table = $('#vehicles').DataTable( {
...
... 
...     
              $('#vehicles').DataTable( {
...
... 
...     

The contents of the second call should be inside the first call.

Regarding fixed column, I would just get this working first.

trebmal

Hi tangerie, thanks for responding so fast.
I'm sorry but I need more clear explanation, I have no experience in js, and every small step is very difficult for me.
I tried to modify the code following your explanations.
Below we show the second part of the code . With the changes that I believe understand.
But now it give me this error:

Uncaught TypeError: undefined is not a function

new $.fn.dataTable.FixedColumns( table, {

var table = $('#vehicles').DataTable( {
scrollY:        "300px",
scrollX:        true,
scrollCollapse: true,
paging:         false
} );
new $.fn.dataTable.FixedColumns( table, {
leftColumns: 1,
rightColumns: 1
} );

                      $('#vehicles').DataTable( {

                "dom": "Tfrtip",
                "ajax": "php/table.vehicles.php",

                        "columns": [
                    { "data": "matricula"},
                    { "data": "id_personal"},
                    { "data": "model"},
                    { "data": "renting"},
                    { "data": "inici_renting"},
                    { "data": "final_renting"},
                    { "data": "quota"},
                    { "data": "asseguranca"},
                    { "data": "inici_ass"  },
                    { "data": "final_ass"},
                    { "data": "quota_ass"},
                    { "data": "franquicia"},
                    { "data": "pag_fran"},
                    { "data": "proper_itv"}
                ],

                "tableTools": {
                    "sRowSelect": "os",
                    "sRowSelector": 'td:first-child',
                    "aButtons": [
                        { "sExtends": "editor_create", "editor": editor },
                        { "sExtends": "editor_edit",   "editor": editor },
                        { "sExtends": "editor_remove", "editor": editor }
                    ]
                }
            } );

        } );

        }(jQuery));

allan

Uncaught TypeError: undefined is not a function
new $.fn.dataTable.FixedColumns( table, {

Have you included FixedColumns on your page? It can be obtained from the downloads page.

If you were to give us a link to the page, as required in the forum rules, we would immediately be able to say what the issue is.

Allan

trebmal

Hi Allan,

I'm sorry you're right,

http://debug.datatables.net/efepas

http://www.miky.es/int/ProvaFormularis/vehicles.html

I have no experience in js, and every small step is very difficult for me.
I've read de documentation about this error and I know that provides from double initialisation, but after several attempts, I'm unable to find the correct solution.
After the reply of tangerine, I continued testing, but is impossible for me, could you say me exactly, the necessary modifications for a correct code.

Thanks

tangerine

The original issue remains - "Cannot reinitialise DataTable.".

I pointed you to the two initialising calls, but you haven't fixed them. The second one should be combined with the first.

I have no experience in js, and every small step is very difficult for me.

Perhaps you should be looking at Paid Support options.
http://datatables.net/support/index

trebmal

Hola tangerine.

Certainly the original issue reamins.

I put back because Allan asked me if the code was included FixedColums.

In another previous post I modified the code, with the modifications, that I believe you comment me, I understand that but I d'ont know how to apply it .

I believed the solution was much more simple.
I try to fight a bit more with code.

Where I can see a full code js datatable editor to understand how solve the double inisialitation, and the correct structure.

Thanks

trebmal

Hello all,
Finally I found the solution .
Then stick the code of how to initialize FixedColums dataTables editor.

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {

        "ajax": "php/table.vehicles.php",
        "table": "#vehicles",
        "fields": [
            {
                "label": "matricula",
                "name": "matricula"
            },
            {
                "label": "id_personal",
                "name": "id_personal"
            },
            {
                "label": "model",
                "name": "model"
            },
            {
                "label": "renting",
                "name": "renting"
            },
            {
                "label": "inici_renting",
                "name": "inici_renting"
            },
            {
                "label": "final_renting",
                "name": "final_renting"
            },
            {
                "label": "quota",
                "name": "quota"
            },
            {
                "label": "asseguran\u00e7a",
                "name": "asseguranca"
            },
            {
                "label": "inici_ass",
                "name": "inici_ass"
            },
            {
                "label": "final_ass",
                "name": "final_ass",
                "type": "date",
                "dateFormat": "dd\/mm\/y"
            },
            {
                "label": "quota_ass",
                "name": "quota_ass"
            },
            {
                "label": "franquicia",
                "name": "franquicia"
            },
            {
                "label": "pag_fran",
                "name": "pag_fran"
            },
            {
                "label": "proper_itv",
                "name": "proper_itv"
            }
        ]
    } );


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




  var table = $('#vehicles').DataTable( {

        "dom": "Tfrtip",
        "ajax": "php/table.vehicles.php",
                "scrollX": true,
                "paging": false,


                        "columns": [
            {
                "data": "matricula"
            },
            {
                "data": "id_personal"
            },
            {
                "data": "model"
            },
            {
                "data": "renting"
            },
            {
                "data": "inici_renting"
            },
            {
                "data": "final_renting"
            },
            {
                "data": "quota"
            },
            {
                "data": "asseguranca"
            },
            {
                "data": "inici_ass"
            },
            {
                "data": "final_ass"
            },
            {
                "data": "quota_ass"
            },
            {
                "data": "franquicia"
            },
            {
                "data": "pag_fran"
            },
            {
                "data": "proper_itv"
            }
        ],






        "tableTools": {
            "sRowSelect": "os",
            "sRowSelector": 'td:first-child',
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }



            } );
       new $.fn.dataTable.FixedColumns(table);
} );

}(jQuery));

Thanks