在代码点火器中使用数据表如何显示所需列的下拉过滤器

Question

我想使用所需列（如城市）上的数据表下拉列表过滤列表

<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <thead>
        <tr>
            <th>Sl.no</th>
            <th>Principle</th>
            <th>City</th>
            <th>Branch Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <?php $i=1; foreach($branchDetails as $branch) {?>
        <tr>
            <td><?php echo $i;?></td>
            <td class="center"><?php echo $branch->principle_name;?></td>
            <td class="center"><?php echo $branch->city_name;?></td>
            <td class="center"><?php echo $branch->branchName;?></td>
            <td class="center">
                <a href="<?php echo base_url();?>admin/Branch/edit/<?php echo $branch->branchId ; ?>">
                    <i class="icon-edit"></i>  
                </a>
                <!--<a href="#" data-id="<?php echo $branch->branchId;?>">
                    <i class="icon-trash"></i> 
                </a>-->
            </td>
        </tr>
        <?php $i++; } ?>
    </tbody>
</table>  

数据表 js 是

$('.datatable').dataTable({
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
            }
        } );

我如何实现在此上显示下拉过滤器.

Answer 1

我想你读了本教程，也许你可以得到它

单击此处查看多下拉过滤器

Answer 2

如果只想有选定的列下拉列表筛选器。它可以实现

$(document).ready(function() {
$('#example').DataTable( {
    initComplete: function () {
        this.api().columns().every( function () {
            var column = this;
            if(column[0]==1){ /* is the second column you want to have dropdown filter */
                var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.footer()).empty() )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );
                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();
                } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            }
        } );
    }
} );
} );

普伦克的工作示例