Выпадающий фильтр jQuery datatables

Question

Выпадающий фильтр jQuery datatables

Вот мой код:

$(document).ready(function() {

    /* Initialise the DataTable */

    var oTable = $('#example').dataTable({

        "oLanguage": {

            "sSearch": "Search all columns:"

        },

        "iDisplayLength": 10,

        "bJQueryUI": true,

        "sPaginationType": "full_numbers",

        "bFilter": true,

    }); 



    /* Add a select menu for each TH element in the table footer */

    $("thead th").each( function ( i ) {

        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );

        $('select', this).change( function () {

            oTable.fnFilter( $(this).val(), i );

        } );

    } );        

} );

Я использую плагин jQuery datatables, он отлично работает так же, как этот пример:

Http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

Что я хотел бы сделать, так это вместо выпадающего списка для каждого столбца я хотел бы раскрывающийся список только для одного конкретного столбца.

Итак, я предполагаю, что мне нужно изменить:

$("thead th").each( function ( i ) {

Но я не знаю, что поставить. Любая помощь будет очень признательна, Спасибо заранее.

878 6

jQuery datatables

6 ответов:

Comments

Ничего не найдено.

Nicola Peluchetti · Accepted Answer · 2012-03-08 13:28:45

Если вам нужно только на один столбец, вы можете сделать

var indexOfMyCol = 2;//you want it on the third column
$("thead th").each( function ( i ) {
    if(i === indexOfMyCol){ 
      this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
      $('select', this).change( function () {
        oTable.fnFilter( $(this).val(), i );
      } );
    }
} );

crashtestxxx · Accepted Answer · 2015-03-30 21:41:56

Вы также можете создать свой собственный список выбора и разместить его в любом месте вне таблицы.
<select id="mySelect">
    <option value=""></option>
    <option value="1">1</option>
    ...
</select>

<script>
    $('#mySelect').on('change',function(){
        var selectedValue = $(this).val();
        oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg
    });
<script>

Jovan MSFT · Accepted Answer · 2012-03-08 17:06:25

Вы можете использовать фильтр столбцов таблиц дат см. http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

Это плагин второго уровня для datatables.

Йован

shanmugavel · Accepted Answer · 2012-07-19 19:01:06

Вы можете использовать плагин columnfilter...

$(document).ready(function(){
     $('#example').dataTable()
          .columnFilter({
            aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                     { type: "text" },
                     null,
                     { type: "number" },
             { type: "select" }
                ]

        });
});

Amritpal Singh · Accepted Answer · 2016-02-21 00:46:37

Я думаю, что что-то вроде следования может сделать трюк

$("thead th").each( function ( i ) {
    if(i==1)
    {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } ); 
    }
} );

pjammer · Accepted Answer · 2016-11-12 14:07:06

Может быть, времена изменились, но без плагина и с использованием dataTables 1.10.12и это @api, как человек в комментариях предложил, Вы можете использовать целое число индекса на основе нуля из массива для соответствующей таблицы. Пример кода, важные биты находятся в строке 2 ниже. Я ищу только на 4-й колонке, и это coffeescript, но вы понимаете идею.
    $('#example').DataTable initComplete: ->
                    @api().columns([3]).every ->
                            column = this
                            select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', ->
                                    val = $.fn.dataTable.util.escapeRegex($(this).val())
                                    column.search(val ? '^'+val+'$' : '', true, false).draw()
                                    return
                            )
                            column.data().unique().sort().each (d, j) ->
                                    select.append '<option value="' + d + '">' + d + '</option>'
                                    return
                            return
                    return