2

Há dias tento implementar o "Table Filter" do Boostrap, porém a filtragem não funciona. Alguém poderia me ajudar?

Eis todo o código:

<head>
    <meta charset="UTF-8" />
    <title>Teste</title>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://rawgit.com/lukaskral/bootstrap-table/feature_lukaskral_bootstrap_table_filter_integration/src/bootstrap-table.js"></script>
    <script src="../src/bootstrap-table-filter.js"></script>
    <script src="../src/ext/bs-table.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://rawgit.com/lukaskral/bootstrap-table/feature_lukaskral_bootstrap_table_filter_integration/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="../src/bootstrap-table-filter.css">
</head>

<body>

    <div id="filter-bar"> </div>

    <table class="bootstrap-table"
        id="tbl"
        data-click-to-select="true"
        data-toggle="table"
        data-toolbar="#filter-bar"
        data-show-columns="true"
        data-show-filter="true"
        data-show-toggle="true"
    >
        <thead>
            <tr>
                <th data-field="id" data-align="center" data-sortable="true">Item ID</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>0</td></tr>
            <tr><td>1</td></tr>
            <tr><td>2</td></tr>
            <tr><td>3</td></tr>
        </tbody>
    </table>

    <pre style="margin-top: 30px" id="log"></pre>


    <script type="text/javascript">
        $(function() {
            $('#tbl').bootstrapTable();

            $('#filter-bar').bootstrapTableFilter({
                filters:[
                    {
                        field: 'id',
                        label: 'Item ID',
                        type: 'select',
                        values: [
                            {id: '0', label: '0'},
                            {id: '1', label: '1'},
                            {id: '2', label: '2'}
                        ]
                    }
                ],
                onSubmit: function() {
                    var data = $('#filter-bar').bootstrapTableFilter('getData');
                    console.log(data);
                }
            });
        });
    </script>

</body>

FONTE DE INFORMAÇÃO

https://github.com/lukaskral/bootstrap-table-filter

http://wenzhixin.net.cn/p/bootstrap-table/docs/extensions.html#filter

2 Respostas 2

-1

function inserirNaTabela() { const textarea = document.querySelector("#result"); const tabela1 = document.querySelector("#minha-tabela tbody"); const tabela2 = document.querySelector("#minha-tabela1 tbody");

//Separar o texto do textarea em duas partes
const texto = textarea.value;
const valoresAntes = texto.toLowerCase().split("values")[0];
const valoresPos = texto.toLowerCase().split("values")[1];

const regex = /^(.*?)\(/;
const match = regex.exec(valoresAntes);

let label = document.querySelector("#valores-anteriores");
if (match) {
    label.textContent = `${match[1]}`;
} else {
    label.textContent = "N/A";
}

const content = valoresAntes.replace(regex, "");
const contentArray = content.split(",");
const table = document.getElementById("minha-tabela").getElementsByTagName("tbody")[0];
for (var i = 0; i < contentArray.length; i++) {
    const valor = contentArray[i].trim();
    if (valor !== "") {
        const row = table.insertRow();
        const cell1 = row.insertCell(0);
        cell1.innerHTML = valor;
    }
}

//Adicionar os valores posteriores
const valores = valoresPos ? valoresPos.split(",") : [];
let html = "";
let textoEntreAspas = false;
let linha = "";
for (const valor of valores) {
    if (valor.trim() !== "") {
        if (textoEntreAspas) {
            linha += `,${valor.trim()}`;
            if (valor.includes("'")) {
                html += `<tr><td>${linha}</td></tr>`;
                textoEntreAspas = false;
                linha = "";
            }
        } else {
            if (valor.includes("'")) {
                linha = `${valor.trim()}`;
                textoEntreAspas = true;
            } else {
                html += `<tr><td>${valor.trim()}</td></tr>`;
            }
        }
    }
}
if (linha) {
    html += `<tr><td>${linha}</td></tr>`;
}
tabela2.innerHTML += html;

};

-2
Conversor de SQL - TESTE

Converter Campos
Campo
    <table id="minha-tabela1">
        <thead>
        <tr>
            <th class="th_valor" id="coluna2">Valor</th>
        </tr>
        </thead>
        <tbody>
        </tbody>    
    </table>
</div>
<script> //Separador por vírgula, adicionar os valores na tabela.
        function inserirNaTabela() {
            const textarea = document.querySelector("#result");
            const tabela1 = document.querySelector("#minha-tabela tbody");
            const tabela2 = document.querySelector("#minha-tabela1 tbody");

            //Separar o texto do textarea em duas partes
            const texto = textarea.value;
            const valoresPos = texto.split("values")[1];
            const valoresAntes = texto.split("values")[0];

            //Adicionar os valores anteriores a tabela1
            const valores1 = document.getElementById("result").value

            const regex = /^(.*?)\(/;
            const match = regex.exec(valores1);

            var content = valores1.replace(regex, "");

            var contentArray = content.split(',');

            var table = document.getElementById("minha-tabela").getElementsByTagName("tbody")[0];
            for(var i = 0; i < contentArray.length; i++) {
            var row = table.insertRow();
            var cell1 = row.insertCell(0);  
            cell1.innerHTML = contentArray[i].trim();
        }

            //Adicionar os valores posteriores a tabela2
            const valores = valoresPos.split(",");
            let html = "";
            for (const valor of valores) {
                if (valor.trim() !== "") {
                    html += `<tr><td>${valor.trim()}</td></tr>`;
                }
            }
            tabela2.innerHTML += html;
        }

    textarea.addEventListener('input', function(event){
        const texto = event.target.value;
        const caracteresEspeciais = /[`!@#$%^&*))+\=\[\]{};:"\\|<>\/?~]/g;

        if (caracteresEspeciais.test(texto)) {
            event.target.value = texto.replace(caracteresEspeciais, '');
        }
    });
    
    const textarea90 = document.getElementById('result2');

    textarea90.addEventListener('keypress', function(event) {
        const key = event.key;
        const caracteresEspeciais = /[`!@#$%^&*())+\=\[\]{};:"'\\|<>\/?~]/;

        if (caracteresEspeciais.test(key)) {
            event.preventDefault();
        }
    });

    textarea90.addEventListener('input', function(event){
        const texto = event.target.value;
        const caracteresEspeciais = /[`!@#$%^&*())+\=\[\]{};:"\\|<>\/?~]/g;

        if (caracteresEspeciais.test(texto)) {
            event.target.value = texto.replace(caracteresEspeciais, '');
        }
    });

    const caption = document.getElementById('minha-caption');

    textarea.addEventListener('input', function(event) {
        const texto = event.target.value;
        const index = texto.indexOf('(');

        if (index >= 0) {
            const valores = texto.substring(0, index);
            caption.textContent = valores;
        }
    });

    const textarea22 = document.getElementById("result");
    const textarea23 = document.getElementById("result2");

    textarea22.addEventListener("input", () => {
        const value = textarea22.value;
        const index = value.indexOf("VALUES");
        if (index !== -1) {
            const values = value.substring(index + "VALUES".length).trim();
            textarea23.value = values;
            textarea22.value = value.substring(0, index).trim();
        }
    });

    textarea22.addEventListener("input", () => {
        const value = textarea22.value;
        const index = value.indexOf("values");
        if (index !== -1) {
            const values = value.substring(index + "values".length).trim();
            textarea23.value = values;
            textarea22.value = value.substring(0, index).trim();
        }
    });


    

</script>
1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    3/05 às 12:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .