Question

我想知道是否可以通过DataTables.net过滤包含下拉列表的列。例如：

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Item requested</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Item requested</th>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>
    <select id="ItemRequested" name="ItemRequested">
        <option value="FO">Foo</option>
        <option value="BA">Bar</option>
        <option selected="selected" value="WI">Widget</option>
    </select>
</td>
    </tr>
    <tr>
        <td>Joe Bloggs</td>
        <td>Software Engineer</td>
        <td>London</td>
        <td>
    <select id="ItemRequested" name="ItemRequested">
        <option value="FO">Foo</option>
        <option selected="selected" value="BA">Bar</option>
        <option value="WI">Widget</option>
    </select>
</td>
    </tr>
</tbody>

我需要能够为每个下拉列表搜索选定的值。

非常感谢任何帮助。

感谢。

Answer 1

尝试这样的事情：

<html>
	<head>
		<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
		<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
		
		<script type="text/javascript" language="javascript" class="init">
		$(document).ready(function() {
            var data = [];
            data.push(
                [1,"Sasha","Brenna","0800 1111"],
                [2,"Sage","Mia","(01012) 405872"],
                [3,"Chelsea","Allistair","076 0578 0265"],
                [4,"Uta","Savannah","070 1247 5884"],
                [5,"Remedios","Berk","0995 181 0007"],
                [6,"Ruby","Wayne","0800 1111"],
                [7,"Faith","Fredericka","(01709) 099879"],
                [8,"Myra","Harrison","070 4241 9576"],
                [9,"Drake","Miriam","0800 733635"],
                [10,"Reed","Shannon","076 8597 5067"]
            );
            
            var count = 0;
            $('#data_table').DataTable( {
                data:           data,
                
                initComplete: function (){
                    this.api().columns().every( function () {
                        /*if(count == 2)
                        {*/
                            var column = this;
                            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>' )
                            });
                        /*}*/
                        count++;
                    });
                }
            });
        });
		</script>
		
		<style>
		.odd{
			background-color: #FFF8FB !important;
		}
		.even{
			background-color: #DDEBF8 !important;
		}
		</style>
	</head>
	<body>
	<div>

	<table id="data_table" width="100%">
		<thead>
			<tr>
				<th>Emp Code</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Mobile</th>
			</tr>
		</thead>

		<tbody>
		<!-- Dynamic Body -->
		</tbody>

        <tfoot>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
	</table>

	</body>
	</div>
</html>

此处下拉选择过滤器在页脚处实现。

过滤包含DataTables.net中下拉列表的列

1 个答案: