jquery - 数据表搜索选项

Question

我正在为表使用数据表。我想仅基于名称列进行搜索，但默认情况下它基于所有列进行搜索。我想仅基于名称进行搜索，任何帮助都应该不胜感激。

js代码

$('#table-filter').dataTable({
"bDestroy": true,
"bPaginate": true,
"bProcessing": false,
 "bStateSave": false,
 "aLengthMenu": [[5, 10, 20, 50, 100 , -1], [5, 10, 20, 50, 100, "All"]],
 "iDisplayLength" : 5,
 "sPaginationType": "full_numbers",

 "aoColumnDefs": [
  { 'bSortable': false, 'aTargets': [ 0,1,7,8 ] }
        ],
"oLanguage": {
                 "sUrl": baseUrl+"/media/language/dt/"+lang_code+".txt",
             }
  })

Answer 1

试试这个，希望对你有帮助：

$('#example').dataTable( {
    "aoColumnDefs": [
      { "bSearchable": true, "aTargets": [ 0 ] },
      { "bSearchable": false, "aTargets": [ 1] },
      { "bSearchable": false, "aTargets": [ 2] },
      { "bSearchable": false, "aTargets": [ 3] }
    ] } );

例子

或者

$('#example').dataTable( {
    "aoColumnDefs": [
      { "bSearchable": false, "aTargets": [ 1,2,3,4 ] }      

    ] } );

例子

这是列的 API 文档

Answer 2

根据数据表文件

// Using aoColumnDefs
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
      { "bSearchable": false, "aTargets": [ 0 ] }
    ] } );
} );


// Using aoColumns
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumns": [
      { "bSearchable": false },
      null,
      null,
      null,
      null
    ] } );
} );

Answer 3

另一种解决方案可能是使用Yet Another DataTables Column Filter - (yadcf)（我写的）

您可以使用自动完成过滤器类型，并且可以将其放置在页面中的任何位置，代码示例：

$('#table-filter').dataTable({...}).yadcf(
    [
        {
          column_number : 2, 
          filter_type: "auto_complete",
          filter_container_id: "external_filter_container"
        }
    ]);

您要放置过滤器的/external_filter_container的 id在哪里divspan

Answer 4

您还可以创建自己的输入搜索。

1.- 输入搜索html：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 dataTables_filter">
				<div class="dataTables_filter">
					<label style="float:right;">
						<fmt:message key="provider.search.name"/>
						<input id="colNameSearch_filter" type="text" class="form-control input-sm">
					</label>
				</div>
			</div>

在输入html中写入后抛出一个函数。

$('#colNameSearch_filter').on( 'keyup click', function () {
        filterColumn(1);
    } );

这就是我们所说的函数。

function filterColumn ( i ) {
    $('#tableResponse').DataTable().column( i ).search(
        $('#colNameSearch_filter').val()
    ).draw();
}