Include select box script

Lerster

I get my table data server sided with ajax. This is my working code at the moment:

$(document).ready(function() {

$('#example').DataTable( {

    "processing": true,
    "serverSide": true,
    "ajax": "https://xyyy.de/getData.php",

 "columnDefs": [
                 {
                    "targets": 1,
                    "render": function ( data, type, row, meta) {
                     var itemID = row[0];
                     var quality = row[2];
                     return '
<img height="4%" width="4%" src="https://xyyy.com/images/wow/icons/large/inv_boots_cloth_05.jpg" />'
                      + ('<a href="https://www.xyyy.com/item=' + itemID + '" class="q' + quality + '"> ' + data + '</a>');
                        }},
                {
            "targets": [  ],
            "visible": false,
            "searchable": false
                         }]
    }  );
 }  );

Now I want to add a select box outside of the table.

This would be the select box script:

$(document).ready(function (){
 var table = $('#example').DataTable({
dom: 'lrtip'
   });

$('#table-filter').on('change', function(){
table.search(this.value).draw();   
   });
});

This is the fiddle: https://jsfiddle.net/zmoos6tu/1/

How can I include this select box script in my working code? I tried different solutions but I don´t get the right way to include it..

kthorngren

Your code works here with server side processing:
http://live.datatables.net/zipusali/1/edit

Do you get errors in the browser's console?

What happens when trying the search?

Is the search request sent to the server?

What is the response?

Can you post a link to your page so we can help debug?

Kevin

Lerster

Thanks, your example helped me a lot. I just had trouble to include the select box in my existing script.