[Anderson Paraibano]

Resumo:
Este artigo aborda a integração do DateRangePicker com o Datatable para combinar duas colunas de pesquisa em uma tabela de dados usando jQuery. O DateRangePicker é uma ferramenta que permite selecionar um intervalo de datas, enquanto o Datatable é uma biblioteca que oferece recursos avançados para manipulação de tabelas de dados. Ao combinar essas duas tecnologias, é possível criar uma funcionalidade de pesquisa poderosa para filtrar dados com base em um intervalo de datas específico.

Introdução:
Quando se trata de exibir e pesquisar dados em uma tabela, muitas vezes é necessário filtrar os resultados com base em um intervalo de datas específico. Para facilitar essa tarefa, podemos utilizar o DateRangePicker em conjunto com o Datatable. O DateRangePicker permite que os usuários selecionem um intervalo de datas de forma intuitiva, enquanto o Datatable oferece recursos avançados para manipulação e exibição de tabelas de dados. Neste artigo, vamos explorar como combinar essas duas ferramentas para criar uma poderosa funcionalidade de pesquisa em tabelas.

Configurando o ambiente:
Antes de começarmos, é importante configurar corretamente o ambiente de desenvolvimento. Certifique-se de ter as seguintes dependências instaladas:

jQuery: uma biblioteca JavaScript rápida, pequena e rica em recursos.
DateRangePicker: uma biblioteca jQuery para seleção de intervalo de datas.
Datatable: uma biblioteca para manipulação avançada de tabelas de dados.
Após a configuração inicial, podemos prosseguir para a implementação.

Implementação:

Inclua as dependências necessárias em seu projeto, adicionando os links para os arquivos JavaScript e CSS no cabeçalho do seu documento HTML.
html
Copy code
<link rel=”stylesheet” href=”caminho/para/daterangepicker.css”>
<link rel=”stylesheet” href=”caminho/para/datatables.css”>
<script src=”caminho/para/jquery.js”></script>
<script src=”caminho/para/moment.js”></script>
<script src=”caminho/para/daterangepicker.js”></script>
<script src=”caminho/para/datatables.js”></script>
Crie uma tabela HTML para exibir seus dados.
html
Copy code
<table id=”tabela-dados”>
<thead>
<tr>
<th>Nome</th>
<th>Data de Início</th>
<th>Data de Término</th>
</tr>
</thead>
<tbody>
<!– Seus dados aqui –>
</tbody>
</table>
Inicialize o DateRangePicker e o Datatable no seu código JavaScript.
javascript
Copy code
$(document).ready(function() {
// Inicialize o DateRangePicker
$(‘#daterange’).daterangepicker({
opens: ‘left’,
autoUpdateInput: false
}, function(start, end) {
// Atualize o valor do input com o intervalo de datas selecionado
$(‘#daterange’).val(start.format(‘DD/MM/YYYY’) + ‘ – ‘ + end.format(‘DD/MM/YYYY’));

// Filtrar a tabela de dados com base no intervalo de datas
tabelaDados.draw();
});

// Inicialize o Datatable
var tabelaDados = $(‘#tabela-dados’).DataTable();

// Adicione um evento para o input do DateRangePicker para limpar a seleção
$(‘#daterange’).on(‘cancel.daterangepicker’, function() {
$(this).val(”);
tabelaDados.draw();
});

// Adicione um evento para filtrar a tabela de dados com base no intervalo de datas
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var min = moment($(‘#daterange’).data(‘daterangepicker’).startDate);
var max = moment($(‘#daterange’).data(‘daterangepicker’).endDate);
var dataInicio = moment(data[1], ‘DD/MM/YYYY’);
var dataFim = moment(data[2], ‘DD/MM/YYYY’);

if ((min.isSameOrBefore(dataInicio) && max.isSameOrAfter(dataInicio)) ||
(min.isSameOrBefore(dataFim) && max.isSameOrAfter(dataFim)) ||
(dataInicio.isSameOrBefore(min) && dataFim.isSameOrAfter(max))) {
return true;
}
return false;
});
});
Explicação:

Inicializamos o DateRangePicker no elemento de entrada (input) com o id “daterange”. Configuramos a opção “opens” para “left” para que o seletor seja aberto à esquerda do input. Também definimos “autoUpdateInput” como “false” para atualizar manualmente o valor do input quando o intervalo de datas for selecionado.

Inicializamos o Datatable no elemento da tabela com o id “tabela-dados”.

Adicionamos um evento para o input do DateRangePicker para atualizar o valor do input quando um intervalo de datas for selecionado. Em seguida, filtramos a tabela de dados chamando o método “draw()” no objeto do Datatable.

Adicionamos um evento para o input do DateRangePicker para limpar a seleção quando o evento “cancel.daterangepicker” for acionado. Nesse caso, também chamamos o método “draw()” para filtrar a tabela de dados.

Adicionamos uma função de filtro personalizada ao objeto do Datatable usando o método “push()” na propriedade “ext.search”. Essa função compara as datas da coluna “Data de Início” e “Data de Término” com o intervalo de datas selecionado no DateRangePicker. Se houver correspondência, retornamos “true”, caso contrário, retornamos “false”.

Conclusão:
Neste artigo, exploramos como combinar o DateRangePicker com o Datatable para criar uma funcionalidade de pesquisa poderosa em tabelas de dados. Através da integração dessas duas bibliotecas utilizando jQuery, pudemos filtrar os dados com base em um intervalo de datas específico selecionado pelo usuário. Essa abordagem oferece uma maneira eficiente de lidar com pesquisas em tabelas contendo informações de datas.

[Autor]

Posts