Split jQuery files

Split jQuery files

jalapejalape Posts: 117Questions: 2Answers: 1

Good afternoon,
Sometimes the files containing the Datatable Editor jQuery can get very long. I would like to be able to split them into files that could contain properties like "language" and call them from the main file:

    $('#titulo_tbl').DataTable( {
        "language": {}

The question is, in your experience, what is the most appropriate way to do it?
Thanks.
All the best

Replies

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    Use the Download Builder to concatenate and minify the options you select.

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Thanks Kevin for answering,
    I think I have not explained myself correctly. My intention is to separate the jquery into smaller chunks. If, for example, the "language": property occupies 200 lines, it can be taken out of the main file and placed in a secondary one. With what among other things, it could be used by more than one table.
    Thanks

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited June 2021

    You can set defaults as described in the Options manual. You can use global variables to define your Datatables options then apply the one that you want, for example:

    var lang1 = { "emptyTable": "No data available in table", ....};
    var lang2 = { "emptyTable": "Table is empty", ....};
    
    var table = $('#MyTable').DataTable({
      language: lang2,
      ....
    });
    

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    This option will greatly improve the code of my applications.
    Thank you very much Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Hello again,
    I have encountered a difficulty. When I apply it with something that has a variable inside it, I can't find a way to recognize the variable inside it.
    The specific case of the buttons:

    var botones = [
        {
            extend: 'edit', 
            editor: editor,
            text: 'Editar',
            titleAttr: 'Editar'
        }
    ];
    

    Logically, the editor variable is declared and in normal use it recognizes it without problem, but when enclosing it within the buttons variable, it no longer recognizes it.
    Is there a way to overcome this problem? Or simply in the case of the buttons, it cannot be used.
    Thanks

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    Are you creating the botones variable before or after you declare the editor variable, ie, var editor = new $.fn.dataTable.Editor({ .. });? This is more a Javascript processing issue than a requirement or limitation of Datatables and Editor. See this example:
    http://live.datatables.net/nowipozo/1/edit

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Thank you Kevin,
    Using as in the example:

            var botones = [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ];
    
            $('#disco_tbl').DataTable( {
                language: datatable_es,
                lengthMenu: pag_menu,
                iDisplayLength: 3,
                sPaginationType:"full_numbers", //Primero y último en la paginación
                responsive: true,
                select: true,
                dom: dom_pers,
                ajax: "datos_disco.php",
                columns: [
                    { data: "tb_disco.disco" }
                ],
    
                buttons: botones,
            } );
    

    It works perfectly, but I want to take the declaration out of the buttons variable, to have it in an external file. I have tried this but it doesn't work:

            import("./botones.js")
    
            $('#disco_tbl').DataTable( {
                language: datatable_es,
                lengthMenu: pag_menu,
                iDisplayLength: 3,
                sPaginationType:"full_numbers", //Primero y último en la paginación
                responsive: true,
                select: true,
                dom: dom_pers,
                ajax: "datos_disco.php",
                columns: [
                    { data: "tb_disco.disco" }
                ],
    
                buttons: botones,
            } );
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    I haven't used import like this so not sure how it works. Have you declared your editor variable globally? The problem you are trying to solve is not a Datatables specific issue. You need to get your Javascript environment setup correctly. If you want us to take a look then please post a link to your page or a test case showing the problem.

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Thank you Kevin,
    In this route you can find:

    https://www.javierlasen.es/mapas/Admin/Marker/

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    You are getting this error:

    Uncaught ReferenceError: botones is not defined

    Possibly you need to create the botones as a global variable.

    Kevin

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    If you want to use a Javascript variable, then you would need to export a function from your imported file and then execute that, passing in the parameter. It isn't like the PHP include which it looks like you might be thinking of, which just inlines the included code.

    You might do something like:

    export buttons function (editor) {
      return [
        { extend: "create", editor: editor },
        { extend: "edit", editor: editor },
        { extend: "remove", editor: editor }
      ];
    }
    

    Then:

    import {buttons} from './myInclude';
    
    // ...
      buttons: buttons(editor),
    

    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Thanks Allan for your time,
    I will not be doing something right:
    In datatable_marker.js I make the buttons call and property.

    import {buttons} from './botones.js';
    
         $('#markers_table').DataTable( {
    
             buttons: buttons(editor),
             …
    
    In botones.js
    export buttons function (editor) {
        return [
          { extend: "create", editor: editor },
          { extend: "edit", editor: editor },
          { extend: "remove", editor: editor }
        ];
      }
    

    It gives me three syntax errors as seen in the screenshots:

    https://www.javierlasen.es/mapas/Admin/Marker/error1.jpg
    https://www.javierlasen.es/mapas/Admin/Marker/error2.jpg
    https://www.javierlasen.es/mapas/Admin/Marker/error3.jpg

    https://www.javierlasen.es/mapas/Admin/Marker/

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Ah sorry - I wrote that in ES6 imports assuming you were using TypeScript or some other compiler. What are you using? Or are you using just simple <script> tags with no compiling step?

    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1
    edited June 2021

    They are PHP files with simple calls to the scripts of the type:

    <script src="datatable_disco.js"></script>
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    Ah - in that case great them as if you were just using PHP includes then. No need for export and import.

    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1

    So how can I call the external js file to recognize the variable?

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    You don't - if you are just using <script> tag references, then they are all executed in global scope - so:

    <script src="a.js"></script>
    <script src="b.js"></script>
    

    Where a.js is:

    var buttons = [ 'excel', 'pdf' ];
    

    And b.js is:

    console.log(buttons);
    

    would echo out the buttons parameter.

    Obviously if you use imports or requires, then it gets a bit more complex, but if you are just using global variables, then that will do. Longer term you might want to consider using TypeScript with imports and a bundler to limit scope (not polluting the global scope).

    Allan

  • jalapejalape Posts: 117Questions: 2Answers: 1

    The problem is when inside the variable we have an editor variable. Other properties like language, lengthMenu work for me.

    https://javierlasen.es/mapas/Admin/Marker/

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited June 2021

    In botons.js you have this:

    var editor;
    
    var buttons = [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ] 
    

    You are also declaring var editor in the window.onload = function(){ .. } function in datatable_marker.js. You have the variable in two scopes. Use the browser's debugger to see what is happening and you will find where the editor variable is found, for example:

    You are getting this error:

    jQuery.Deferred exception: Cannot read property 'i18n' of null TypeError: Cannot read property 'i18n' of null
        at text 
    .......
    (https://javierlasen.es/mapas/plugin/datatables.net/1.10.24/js/jquery.dataTables.min.js:65:120) undefined
    

    I suspect the error is due to trying to use the global editor not the editor variable assigned in the closure. Try removing the var editor in the datatable_marker.js file. If you are going to have variables declared in multiple files you should use the browser's debugger to track them to make sure they are found where you expect.

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    I have three files:
    An index.php file that makes the calls to the js files:

    <script src="../js/datatable_var.js"></script>
    <script src="../js/datatable_es.js"></script>
    <script src="datatable_marker.js"></script>
    <script src="botones.js"></script>
    

    datatable_marker.js has all the elements of datatable Editor
    datatable_var.js and datatable_es.js have the variables i18n, Language, lengthMenu, dom. These work perfectly.

    buttons.js contains the buttons variable:

    var buttons = [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ]
    

    To the latter, if I don't put the editor variable, it returns an error that it is not found:

    Uncaught ReferenceError: editor is not defined
    

    If I put the editor variable, the error is:

    Uncaught TypeError: Cannot read property 'i18n' of null
    

    That is what he has seen Kevin.

    I have also tried modifying the order of the index.php calls.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    I suggested removing the var editor; from the datatable_marker.js file. Did you do that? The one in botones.js will set it globally. Also you may need to change the order of these two files so botones.js loads first. Script load order and variable scope are important for what you are trying to do. You may want to read this variable scoping tutorial](https://www.w3schools.com/js/js_scope.asp).

    Kevin

  • jalapejalape Posts: 117Questions: 2Answers: 1

    Yes, it looks like an object order problem. I hope to get it.
    Thank you Kevin.

Sign In or Register to comment.