Question

我正在使用DataTables jQuery插件。在所有表格中，在tfoot中，每个td都有一个输入，因此用户可以搜索该内容。

我使用此代码：

    $("tfoot td").each(function (i) {
        $(this).on('change', 'select', function () {
            $('#paginacaoTabela').dataTable().fnFilter(this.value, i);
        });

        $(this).on('change', 'input', function () {
            $('#paginacaoTabela').dataTable().fnFilter(this.value, i);

        });
    });

但是在一些表格中。我有一个使用.fnSetColumnVis(iCol, bVis);的列选择器之后，列索引发生变化，过滤停止工作。

我的表格HTML代码是：

<table class="table table-striped table-bordered table-hover" id="paginacaoTabela">
            <thead>
                <tr>
                    <th>Apresentante</th>
                    <th>Protocolo</th>
                    <th>Data apresentação</th>
                    <th>Número &nbsp;</th>
                    <th>Devedor &nbsp;</th>
                    <th>Documento</th>
                    <th>Endereço</th>
                    <th>Saldo &nbsp;&nbsp;</th>
                    <th>Valor &nbsp;&nbsp;</th>
                    <th>Praça pagamento</th>
                    <th>Data emissão</th>
                    <th>Data pagamento</th>
                    <th>Nosso número</th>
                    <th>Indicação</th>
                    <th>Situação</th>
                    <th class="not_toogle"><!-- devedores --></th>
                    <th class="not_toogle"><!-- id --></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" class="form-control" placeholder="Pesquisar apresentante" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar protocolo" maxlength="10" /></td>
                    <td><input type="text" class="form-control input-small date-picker" placeholder="Pesquisar data apresentação" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar número" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar devedor" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar documento" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar endereço" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar saldo" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar valor" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar praça pagamento" /></td>
                    <td><input type="text" class="form-control input-small date-picker" placeholder="Pesquisar data emissão" /></td>
                    <td><input type="text" class="form-control input-small date-picker" placeholder="Pesquisar data pagamento" /></td>
                    <td><input type="text" class="form-control" placeholder="Pesquisar nosso número" /></td>
                    <td>
                        <select class="form-control input-xsmall" placeholder="Pesquisar indicação">
                            <option value=""></option>
                            <option value="0">Não</option>
                            <option value="1">Sim</option>
                        </select>
                    </td>
                    <td><?php echo $this->listaSituacao(); ?></td>
                    <td><!-- devedores --></td>
                    <td><!-- id --></td>
                </tr>
            </tfoot>
        </table>

DT代码是：

var oTable = $('#paginacaoTabela').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": $(location).attr('href'),
         "aoColumns": [
             { "mData": "apresentante.nome" },
             { "mData": "protocolo" },
             { "mData": "dataProtocolo" },
             { "mData": "numero" },
             { "mData": "devedores.nome" },
             { "mData": "devedores.documento" },
             { "mData": "devedores.endereco" },
             { "mData": "saldo" },
             { "mData": "valor" },
             { "mData": "pracaPagamento" },
             { "mData": "dataEmissao" },
             { "mData": "dataPagamento" },
             { "mData": "nossoNumero" },
             { "mData": "indicacao" },
             { "mData": "situacao.nome" },
             { "mData": "devedores.id", 'bVisible': false },
             { "mData": "id" },
          ]
    }); 

    var cookieName = 'checkbox_consulta_';

    $(document).on('change', '#column_toggler input[type="checkbox"]', function() {

        var iCol = parseInt($(this).attr("data-column"));
        var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;

        bVis = (bVis ? false : true);

        $.cookie(cookieName + iCol, bVis);
        oTable.fnSetColumnVis(iCol, bVis);
    });

    $('#column_toggler input[type="checkbox"]').each(function() {

        var iCol = parseInt($(this).attr("data-column"));

        if ($.cookie(cookieName + iCol) === 'false') {
            $(this).prop('checked', false).trigger('change');
        }

    });

如果您愿意，可以在这里看到http://protesto21.com.br/titulo/consulta/ 用户manaca，密码p21

谢谢你们

Answer 1

为什么不过滤otable？

.fnSetFilteringDelay(700) .append( 
                        '<tfoot><tr>' + 
                            '<td><input type="text" name="" placeholder="" class="input-block-level" /></td>' + 
                        '</tr>
                       </tfoot>');
$('#datatable-name tfoot input').keyup( function() {

    oTable.fnFilter( this.value, $('#datatable-name tfoot input').index(this) );
});

在dataTables中获取不可见的列实数索引

1 个答案: