How to apply the DRY (Don’t Repeat Yourself) strategy to this code?

Question

I have several tables, one on each page of my application and all will have the same function of filtering a column, but the columns have different names and different orders.

How to write this code without getting repetitive?

$(document).ready(function(){   
    // Filtro da tabela em fila
    var em_fila = $('#em_fila').dataTable({
                        "sDom":     "t",
                        "paging":   false,
                        "ordering": false,
                        "info":     false
                      }
                  );

    $('.select-category').change( function () { 
        em_fila.fnFilter($('.select-category').val(), 0);
    }); 

    // Filtro da tabela digitação
    var em_digitacao = $('#em_digitacao').dataTable({
                               "sDom":     "t",
                               "paging":   false,
                               "ordering": false,
                               "info":     false
                           }
                       );

    $('.select-category').change( function () { 
        em_digitacao.fnFilter($('.select-category').val(), 0);
    }); 

    // Filtro da tabela com erros
    var com_erros = $('#com_erros').dataTable({
                            "sDom":     "t",
                            "paging":   false,
                            "ordering": false,
                            "info":     false
                        }
                    );

    $('.select-category').change( function () { 
        com_erros.fnFilter($('.select-category').val(), 0);
    });

    // Filtro da tabela com em_recebimentos
    var em_recebimentos = $('#em_recebimentos').dataTable({
                                  "sDom":     "t",
                                  "paging":   false,
                                  "ordering": false,
                                  "info":     false
                              }
                          );

    $('.select-category').change( function () { 
        em_recebimentos.fnFilter($('.select-category').val(), 0);
    });           

});

Answer 1

Hello!

First of all, it will help a great deal to identify the code. Well, you are repeatedly using the datatable with default settings. You could do the following. In the tables you use, in html, you add a class called 'datatable-defaults' (or something that reminds you that this is a datatables with these default settings.

In your code, do the following:

$('table[class~=datatable-defaults]').dataTable(
    {"sDom":"t",
     "paging":   false,
     "ordering": false,
     "info":     false
});

This will make all those tables you need for this will already be instantiated with the datatable. The secret is in the DOM query. In the excerpt:

table[class~=datatable-defaults]

It will search for any "table" that has, within the class attribute, the text datatable-defaults.

That is to say,

(...)
<table id="em_recebimentos" class="table-teste um-estilo-css datatable-defaults">
(...)

...will be found through the Jquery query, then submitted to the initializer of the datatables, for example.

Documentation of that method: http://api.jquery.com/attribute-contains-word-selector/

I hope I’ve helped! =)

Answer 2

You are using the same configuration for all tables. Therefore, you can simplify by selecting all tables at once.

var tables = $('#em_fila, #em_digitacao, #com_erros, #em_recebimentos').dataTable({
        "sDom":     "t",
        "paging":   false,
        "ordering": false,
        "info":     false
    }
);

$('.select-category').change( function () { 
    tables.fnFilter($('.select-category').val(), 0);
});