Column filter outside the table

ksonia90

is there any example that i can follow to create column filter outside the table? Most of the example that i found shows the column filter at the footer.

thanks.

rf1234

What do you mean by this?
Is it this line from this example: https://datatables.net/blog/2014-10-22
"Showing 1 to 10 of 26 entries (filtered from 57 total entries)"
that you want to show elsewhere?

joroma

For example, in my displayed table, the columns are Firstname and Lastname. And then in the actual database table, there is a third column Address, and I want to filter using Address. Is this possible?

rf1234

Just tried it: it is not working if you are not having "address" in the columns of your Javascript data table. But if you have them in the columns it is working! You only need to hide the column in the display. In case you are using a colvis button you can also disable the field there. That's how you can effectively hide the field from the user and still have it searchable. I tested it with this code. I am hiding the field "forex.currency" and it isn't visible in the colvis button either.

var forexTable = $('#tblForex').DataTable( {
    dom: "Bfrltip",
    processing: true,
    serverSide: true,    //server side only works well with type "POST" !!!
    ajax: {
        url: 'actions.php?action=tblForex',
        type: 'POST'
    },
    pageLength: 20,
    lengthMenu: [5, 10, 20, 50, 100, 200, 500],
    columns: [
        {   data: "forex.currency" },
        {   data: "forex.date" },
        {   data: "forex.rate" },
        {   data: "forex.update_time" }
    ],
    order: [[ 1, 'desc' ]],
    columnDefs: [
        // targets may be classes
        {   targets: 0, visible: false }
    ],
    select: {
        style: 'single'
    },            
    buttons: [
        {   extend: "create", editor: forexEditor },
        {   extend: "edit",   editor: forexEditor },
        {   extend: "remove", editor: forexEditor },
        {   extend: "colvis", columns: [1, 2, 3] }
    ]
} );

allan

I think you might find this example useful. Basically you can have an input element anywhere you want - the key is to call the column().search() method when you want the table to search on a different value for the column.

Allan