2015-03-03 4 views
0

Я прочитал апи документ и найти отдельный столбец поиска, чтобы отфильтровать данные по строкам столбца, большой, но я просто нужно добавить один выпадающий фильтр по имени сверху (рядом с номером фильтра)DataTables одностоечный фильтр

enter image description here

Текущая установка (использование tabletool и самозагрузки)

$('table').DataTable({ 
    'aLengthMenu': [[25, 50, 75, -1], [25, 50, 75, 'All']], 
    'iDisplayLength': 25, 
    'stateSave': true, 
    'oLanguage': { 
     'sLengthMenu': 'Show : _MENU_', 
     'sSearch': 'Search : _INPUT_', 
    }, 
    'oTableTools': { 
     'sSwfPath': 'media/swf/copy_csv_xls_pdf.swf' 
    }, 
    /* 
    'order': [[ 1, 'asc' ]], 
    'aoColumnDefs': [ 
       { 
        'bSortable': false, 
        'aTargets': [ -1, 0 ] 
       } 
      ] 
    */ 
}); 

ответ

0

Если вы используете DataTables версии 1.10 и выше вы хотите использовать опцию DOM позиционировать DIV в заголовке, где вы хотите добавить свой фильтр и добавить свой выберите его.

var table; 
    $(document).ready(function() { 
     table = $('#example').dataTable({ 
      "dom": "l<'#myFilter'>frtip" 
     }); 
     var myFilter = '<select id="mySelect">' 
      + '<option value="1">Searchval 1</option>' 
      + '<option value="2">Searchval 2</option>' 
      + '<option value="3">Searchval 3</option>' 
      + '</select>'; 
     $("#myFilter").html(myFilter); 
     table.fnDraw();   
    }); 

Затем добавьте custom filter function.

$.fn.dataTable.ext.search.push(
    function (settings, data) { 
     //your filter stuff belongs here 
     return true; 
    }); 

И перерисовать таблицу каждый раз, когда вы меняете свой фильтр.

$("body").on("change", "#mySelect", function() { 
     table.fnDraw(); 
    }); 

Смотрите эту JSFiddle для примера того, что более или менее должно соответствовать вашим требованиям.

Смежные вопросы