A search field for 2 tables

llaumegui

Hello,

Im looking for make a search field for 2 DataTable on one page is it possible ?

Because we already have a search field on the tables but now I have two (one for each table) and I would like to have only one for the 2 tables.

allan

Sure - create an input element and bind input clear event listeners to it which will trigger the search() method on the two tables.

Allan

llaumegui

Thank you for your answer, but I don't think I really understand what you are telling me.
When you talk about an "input element", is it a search field?
"clear event listeners" I don't know what it corresponds to.

Sorry my English is bad, if you have an example to show me to understand better?
I have a JS Bin that exactly reproduces my case:
https://jsbin.com/gujeceqiqe/edit?html,js,output

kthorngren

Something like this:
http://live.datatables.net/baqebexi/6/edit

Kevin

llaumegui

Thanks for your message, I tried to do like you but it does not work, I updated the JS Bin with your method.
In the HTML part of the JS Bin there are my imports which are not the same as yours but it works on JS Bin but locally it does not work the only difference is that my imports I made in another file (template.php) Any idea why it does not work?
https://jsbin.com/caferamomu/edit?html,js,output

EDIT : In local when I write in the search field of the two tables it doesn't write in the 2 fields of the 2 tables as it does in JS Bin probably why it doesn't work but how does it work?

kthorngren

You are getting this error for both tables:

Cannot reinitialise DataTable.

The reason is explained in the technote link in the error:
https://datatables.net/manual/tech-notes/3

You have this followed by your Datatables initialization code. Remove these two lines:

var tableIncidentsEnCours = $('#tng').DataTable();
var tableIncidentsClos = $('#jours').DataTable();

Assigned the variables when initializing Datatables. Like this:
https://jsbin.com/cijukeyega/1/edit?html,js,output

Kevin

llaumegui

I didn't get any error on the local side, just nothing happening, so I only modified my app.js like this:

`$(document).ready( function () {

$('#multi-search').on( 'keyup change', function () {
    tableIncidentsEnCours.search( this.value ).draw();
    tableIncidentsClos.search( this.value ).draw();
});
var tableIncidentsEnCours = $('#tng').DataTable({
    order: [[0, 'desc']],
    "language": {
        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
    },
    columnDefs: [
        {
          targets: 7,
          render: $.fn.dataTable.render.ellipsis( 20 )
        }
        ]

    });
    var tableIncidentsClos = $('#jours').DataTable({
        order: [[0, 'desc']],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json",
        },
        columnDefs: [
            {
              targets: 7,
              render: $.fn.dataTable.render.ellipsis( 20 )
            }
          ]

    });

});`

And still nothing, I don't understand why

EDIT : IT WORKS IF WE HAVE A PROBLEM WITH DATATABLE JUST MAKE A CRTL + F5 !

Thanks for the help !

See you,

kthorngren

Its hard to say what the problem might be without seeing it to debug. Can you post a link to your page so we can take a look?

I would first check to see if the event handler is firing. Maybe put a console.log statement in the function. If it doesn't fire then either jQuery isn't finding the selector $('#multi-search') or there might be something invalid with the -tag input` element's HTML.

Kevin

llaumegui

@kthorngren Thanks u bro it 's finally working I think I just had to clear the cache to see the change.

But I have another little question how I can have the same style on my universal field than on my 2 other table fields ?

allan

You mean you want the same style for your own input as for the DataTables ones? If you right click on a DataTables input you will see that it has the following styles:

border: 1px solid #aaa;
border-radius: 3px;
padding: 5px;
background-color: transparent;
margin-left: 3px;

Apply them to your own input element and that should do it.

Allan