How to apply the DRY (Do not Repeat Yourself) strategy in this code?

Question

How to apply the DRY (Do not Repeat Yourself) strategy in this code?

Navigation

#1 by (7 votes)
#2 by (3 votes)

2

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

});

javascript jquery jquery-datatables

asked by anonymous 19.01.2015 / 16:01

2 answers

3

You are using the same setting for all tables. So you can simplify by selecting all the 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);
});

19.01.2015 / 17:11

Sort in the query - Leave the last record first and then sort by a field Generating an image based on other images

score 7 · Accepted Answer

Hello

Firstly it will greatly help the code indentation. Well, you're repeatedly using the datatable with default settings. You could do the following. In the tables that you use in html, you add a class called ' datatable-defaults ' (or something that points to this as a datatable 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 that you need for this already be instantiated with the datatable. The secret is in the DOM query. In the excerpt:

table[class~=datatable-defaults]

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

That is,

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

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

Documentation for this method: link

I hope I have helped! =)