How I can fix first column?

How I can fix first column?

trebmaltrebmal Posts: 17Questions: 4Answers: 0

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));

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 2,353Questions: 18Answers: 260
    Answer ✓

    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.

  • trebmaltrebmal Posts: 17Questions: 4Answers: 0

    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));
    
  • allanallan Posts: 50,247Questions: 1Answers: 7,464 Site admin

    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

  • trebmaltrebmal Posts: 17Questions: 4Answers: 0

    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

  • tangerinetangerine Posts: 2,353Questions: 18Answers: 260

    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

  • trebmaltrebmal Posts: 17Questions: 4Answers: 0
    edited June 2015

    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

  • trebmaltrebmal Posts: 17Questions: 4Answers: 0

    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

This discussion has been closed.