I want to add a custom dropdown filter next to the length menu as shown in the picture below

dev945

I want to add a custom dropdown filter next to the length menu as shown in the picture below
http://i.stack.imgur.com/Y6qHD.png

I tried it with

    var product = '<select id="product"><option value="consoles">Consoles</option><option value="peripherals">Peripherals</option></select>';
    
    var config = {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://localhost/app/get_products",
        "fnDrawCallback": function() {
          if($('.dataTables_length').find('#product').length < 1){
              $('.dataTables_length').append(product);
          }
        },
        "fnServerParams" : function ( aoData ) {
            var type = $("#product").val();
            aoData.push({ "name": "type", "value": type });
        },
        "fnServerParams" : function ( aoData ) {
            var type = $("#product").val();
            aoData.push({ "name": "type", "value": type });
        }
      };
    
    $('#table').dataTable(config);

the dropdown gets inserted but it has lot of bugs. It's selected value is not persistent and changes on datatable option change or pagination change.

What is the correct way to achieve this?