Tabelas de dados - caixa de pesquisa fora da tabela de dados

Estou usando DataTables ( datatables.net ) e gostaria que minha caixa de pesquisa estivesse fora da tabela (por exemplo, em meu div de cabeçalho).

Isso é possível ?

Você pode usar a API DataTables para filtrar a tabela. Portanto, tudo o que você precisa é do seu próprio campo de entrada com um evento keyup que acione a função de filtro para DataTables. Com css ou jquery você pode ocultar / remover o campo de entrada de pesquisa existente. Ou talvez DataTables tenha uma configuração para remover / não incluí-lo.

Verifique a documentação da API Datatables sobre isso.

Exemplo:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

De acordo com o comentário @lvkz:

se você estiver usando uma tabela de dados com d maiúsculo .DataTable()(isso retornará um objeto da API Datatable), use isto:

 oTable.search($(this).val()).draw() ;

que é a resposta @netbrain.

se você estiver usando tabela de dados com d minúsculo .dataTable()(isso retornará um objeto jquery), use isto:

 oTable.fnFilter($(this).val());

Você pode usar a sDomopção para isso.

Padrão com entrada de pesquisa em seu próprio div:

sDom: '<"search-box"r>lftip'

Se você usar jQuery UI ( bjQueryUIdefinido como true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

O exemplo acima irá colocar o inputelemento de pesquisa / filtragem em seu próprio, divcom uma classe nomeada search-boxque está fora da tabela real.

Mesmo que ele use sua sintaxe abreviada especial, ele pode, na verdade, aceitar qualquer HTML que você jogar nele.

Este me ajudou para DataTables Versão 1.10.4, porque sua nova API

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

As versões mais recentes têm uma sintaxe diferente:

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

Observe que este exemplo usa a variável tableatribuída quando as tabelas de dados são inicializadas pela primeira vez. Se você não tiver essa variável disponível, basta usar:

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

Desde: DataTables 1.10

- Fonte: https://datatables.net/reference/api/search ()

Isso deve funcionar para você: (DataTables 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

ou

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

Eu tive o mesmo problema.

Tentei todas as alternativas postadas, mas não deu certo, usei um caminho que não está certo mas funcionou perfeitamente.

Exemplo de entrada de pesquisa

<input id="serachInput" type="text"> 

o código jquery

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#serachInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

Quero acrescentar mais uma coisa à resposta do @netbrain relevante no caso de você usar o processamento do lado do servidor (ver serverSide opção ).

A limitação de consulta executada por padrão por tabelas de dados (consulte a opção searchDelay ) não se aplica à .search()chamada de API. Você pode recuperá-lo usando $ .fn.dataTable.util.throttle () da seguinte maneira:

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

Você pode mover o div quando a tabela é desenhada usando a fnDrawCallbackfunção.

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //push to the aoData
        aoData.push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

Em loadtransajax.phpvocê pode receber o valor get:

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

Se você estiver usando JQuery dataTable, então você precisa apenas adicionar "bFilter":true. Isso exibirá a caixa de pesquisa padrão fora da tabela e funciona dinamicamente .. conforme o esperado

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });