Two tables tab...search takes both tables

JCR1951

I'm using datatables with tabs for two tables. (serverside data)
It seems to work.
But the search field looks likes it's searching in both tables together.
The pre-search doesn't work at all.
Can someone help please?

http://pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleD.html

      $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        } );
               .
               .
               .
       // Apply a search to the second table for the demo
    $('#exampleB').DataTable().search( 'melting' ).draw();

jr42.gordon

You have 3 initializations of DataTables, that is 1 too many. Also, $('table.table') is applying to both tables, hence why you might be having the issue you are having. Move your DataTable initialization into a function, pass it the table ID, and return the DataTable.

function initDT(tableId) {
return $(tableId).DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",
            "scrollY": 200,
            "scrollCollapse": true,
            "paging":         true,
            "columns": [
                        { "data": "id" },
                        { "data": "name" },
                        { "data": "address" },
                        { "data": "lat" },
                        { "data": "lng" },
                        { "data": "type" },
                        { "render": function (data, type, full, meta) {
                        if(full.fotoA == "facebook-logo_bl.jpg")
                        {
                        return '<a href="#" onClick="return false;"><img class="facebook" src="'+full.fotoA+'"></a>';
                        }
                        else
                            {
                       return '<img class="facebook" src="'+full.fotoA+'">';                                
                        }                       
                        }
                        }, 
                       
                        
                         { "render": function (data, type, full, meta) {
                            if(full.fotoB == "youtube-logo_red.jpg")    
                            {
                                return '<a href="#" onClick="return false;"><img class="youtube" src="'+full.fotoB+'"></a>';
                                }
                                else
                                    {
                                 return '<img class ="youtube" src="'+full.fotoB+'">';  
                               }   
                         }
                         },
                         
                      { "render": function (data, type, full, meta) {
                            if(full.fotoC == "website-logo_gr.jpg") 
                            {
                                return '<a href="#" onClick="return false;"><img class="website" src="'+full.fotoC+'"></a>';
                                }
                                else
                                    {
                                 return '<img class ="website" src="'+full.fotoC+'">';  
                               }   
                         }
                         },
                     
                  { "data": "faceb" },
                    { "data": "youtu" },
                    { "data": "webs" }
                     
                     
                                    ],
            "columnDefs": [
                        { "visible" : false, "targets": [0,9,10,11] }
                                         ],
                            "order" : [[ 0, "asc" ]]
                                     });
}

Now call it

tableA = initDT('#exampleA');
tableB = initDT('#exampleB');

JCR1951

Thanks Gordon,
I thought I changed it like you did it.
But now I don't have data anymore from the database.
Please look at:
http://pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleD.html

Most of the scripts I took from here:
https://datatables.net/examples/api/tabs_and_scrolling.html

Failed to load resource: the server responded with a status of 405 (Not Allowed)

simpleD.html:1 XMLHttpRequest cannot load http://code.jquery.com/jquery-1.12.0.min.js. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://pctraverse.nl' is therefore not allowed access. The response had HTTP status code 405.

JCR1951

I don't know what happened yesterday.
Tried it with one table at a time.
It worked.
After that it also works for 2 tables.
So the problem is gone!
Thanks for the help Gordon..

http://pctraverse.nl/DataTables-1.10.11/examples/server_side/simpleD.html