How to Filter Table through inputs and click on a button?

Question

I have a table with several columns and rows (populated with jquery), and I wanted to filter after clicking a button, and Filtre according to what is written in the input. How does it ? I’m still learning.

<!--------- CAMPOS P/ PESQUISA -------->
<div class="row">
    <form class="form-horizontal" id="form-filtro">
        <div class="form-group">
            <label class="col-md-2 control-label">Data de Inclusão:</label>
            <div class="col-md-4">
                <input type="text" name="periodoInicio" id="periodoInicio" class="form-control pull-left datepicker" style="width:105px;" placeholder="01/01/2016">
                <label class="control-label pull-left" style="margin:0px 10px;">Até</label>
                <input type="text" name="periodoFim" id="periodoFim" class="form-control pull-left datepicker" style="width:105px;" placeholder="31/12/2016">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Nome:</label>
            <div class="col-md-6">
                <input type="text" name="nome" id="nome" class="form-control pull-left" placeholder="Digite o Nome da Pessoa">
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Empresa:</label>
            <div class="col-md-6">
                <input type="text" name="empresa" id="empresa" class="form-control pull-left" placeholder="Digite o nome da Empresa">
            </div>
        </div>
      
      <!--------- BOTÃO -------->
        <div class="form-group col-md-3">
            <div class="col-md-offset-7 col-md-2">
                <button type="button" class="btn btn-default" id="btn-pesquisa" style="height:35px; width:100px;">Pesquisar</button>
            </div>
        </div>
    </form>
</div>

<!--------- TABELA -------->
<div class="row">
    <table id="table-questionario">
        <thead>
            <tr>
                <th data-field="empresa">EMPRESA</th>
                <th data-field="nome">NOME</th>
                <th data-field="cpf">CPF</th>
                <th data-field="idade">IDADE</th>
                <th data-field="telefone">TELEFONE</th>
                <th data-field="pergunta">PERGUNTA</th>
                <th data-field="resposta">RESPOSTA</th>
                <th data-field="dtpesquisa">DATA DA PESQUISA</th>
            </tr>
        </thead>
    </table>
</div>

HOW I’M POPULATING THE TABLE...

$(function () {
    var RetornaDados = function () {
        var dados = [
        {
            "empresa": "BRInsurance",
            "nome": "Marcos",
            "cpf": "12345685220",
            "idade": "21",
            "telefone": "4562-4562",
            "pergunta": "Pergunta...",
            "resposta": "Resposta...",
            "dtpesquisa": "18/09/2016",
        },
        {
            "empresa": "BRInsurance",
            "nome": "Marcos",
            "cpf": "12345685220",
            "idade": "21",
            "telefone": "4562-4562",
            "pergunta": "Pergunta...",
            "resposta": "Resposta...",
            "dtpesquisa": "06/09/2016",
        },
        {
            "empresa": "BRInsurance",
            "nome": "Marcos",
            "cpf": "12345685220",
            "idade": "21",
            "telefone": "4562-4562",
            "pergunta": "Pergunta...",
            "resposta": "Resposta...",
            "dtpesquisa": "06/09/2016",
        }
          ];
        return dados;
     }
     $('#table-questionario').bootstrapTable({
       data: RetornaDados(),
       pagination: true,
       pageSize: 10,
       search: true,
       showRefresh: true,
       showExport: true,
       sidePagination: 'client',
       dataClickToSelect: true,

    });
 });

Answer 1

You can filter the database query (if using one) using the ORDER BY