How to extend a Javascript Lib to use the same config everytime

Question

I'm using dataTables to show several different kinds of data in my app. Every time I want a table I need to call the method and pass the translation object together with:

oTable = $('.dTables').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<""l>t<"F"fp>',
        "columnDefs": [{
            "targets": 0,
            "render": function ( data, type, full, meta ) {
                var livro = data.split(';');
                return '<a href="/livro/ver/'+ livro[0] +'">'+ livro[1] +'</a>';
            }
        }],
        "language": {
            "search": "Buscar: ",
            "lengthMenu": "Mostrar _MENU_ itens por p&aacute;gina",
            "zeroRecords": "Nenhum registro",
            "info": "Mostrando _PAGE_ p&aacute;ginas de _PAGES_",
        }
    });

Is there anyway to extend the dataTable object to Always use the same object so I don't have to repeat my code over and over again?

Chris Hunt · Accepted Answer · 2015-08-24T20:11:43.060

2

If your goal is to have the language property (or some other specific properties) be the same for the different tables in your application, the documentation suggests extending $.fn.dataTable.defaults. Using your language option:

$.extend(true, $.fn.dataTable.defaults, {
    "language": {
        "search": "Buscar: ",
        "lengthMenu": "Mostrar _MENU_ itens por p&aacute;gina",
        "zeroRecords": "Nenhum registro",
        "info": "Mostrando _PAGE_ p&aacute;ginas de _PAGES_",
    }
});

Then when you create tables in your application, you do not need to define language in your options object, only the properties for the options needed for that specific table. This is an appropriate solution for setting defaults for most of the options.

edited Aug 24 '15 at 20:11

answered Aug 24 '15 at 19:58

Chris Hunt

3,840
3
30
46

That was exactly what I wanted, thanks! How did you know that `$.fn.dataTable.defaults`? Is it the same for any library? And how does `$.extend()` Works? Is it from jQuery? Thank you – Rodrigo Souza Aug 24 '15 at 20:04
1

[The documentation](https://datatables.net/manual/options) mentions it as a way to set defaults (added link to answer), and it probably varies from library to library. [`$.extend()`](https://api.jquery.com/jquery.extend/) is from jQuery, and it copies all of the properties from the second object onto the first object. The first argument (`true`) specifies that it should be a [deep copy](http://stackoverflow.com/questions/184710/what-is-the-difference-between-a-deep-copy-and-a-shallow-copy). – Chris Hunt Aug 24 '15 at 20:10

charlietfl · Answer 2 · 2015-08-24T20:04:19.230

Sure just create a config object

var dTableConfig ={
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "sDom": '<""l>t<"F"fp>',
    "columnDefs": [{
        "targets": 0,
        "render": function ( data, type, full, meta ) {
            var livro = data.split(';');
            return '<a href="/livro/ver/'+ livro[0] +'">'+ livro[1] +'</a>';
        }
    }],
    "language": {
        "search": "Buscar: ",
        "lengthMenu": "Mostrar _MENU_ itens por p&aacute;gina",
        "zeroRecords": "Nenhum registro",
        "info": "Mostrando _PAGE_ p&aacute;ginas de _PAGES_",
    }
}

Then pass that variable to initialization of plugin:

oTable = $('.dTables').dataTable( dTableConfig );

Then if you have instances where you need slightly different configuration can do things like:

var specialConfig = {
   "bJQueryUI": false
}

var specialTableOptions = $.extend(true,{}, dTableConfig , specialConfig);

specialTable= $('.dTables').dataTable( specialTableOptions );

How to extend a Javascript Lib to use the same config everytime

2 Answers2