Split jQuery files

jalape · June 2021

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

kthorngren · June 2021

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

Kevin

jalape · June 2021

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

kthorngren · 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

jalape · June 2021

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

jalape · June 2021

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

kthorngren · June 2021

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

jalape · June 2021

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

kthorngren · June 2021

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

jalape · June 2021

Thank you Kevin,
In this route you can find:

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

kthorngren · June 2021

You are getting this error:

Uncaught ReferenceError: botones is not defined

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

Kevin

allan · June 2021

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

jalape · June 2021

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/

allan · June 2021

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

jalape · June 2021

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

<script src="datatable_disco.js"></script>

allan · June 2021

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

Allan

jalape · June 2021

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

allan · June 2021

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

jalape · June 2021

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/

kthorngren · 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

jalape · June 2021

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.

kthorngren · June 2021

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

jalape · June 2021

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

Split jQuery files

Split jQuery files

Replies

Howdy, Stranger!

Categories

DataTables

Split jQuery files

Split jQuery files

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables