在jQuery数据表中搜索ajax数据源的单个列

Question

嗨，我正在使用jquery数据表来显示数据网格，我使用ajax数据源来获取数据。下面的函数是我传递数据的ajax回调方法。此代码工作良好，但是当我尝试使用单个列搜索时，文本框对于搜索不可见。

function showDynamicListTable(object, divId) { 
var tempObjcet; 
var columns = []; 

if(object == null) { 
    object = []; 
} 

if(object.length == null) { 
    tempObjcet = []; 
    tempObjcet.push(object); 
    object = tempObjcet; 
} 

$.each(object[0], function (key, value) { 
     columns.push({"data": key,"title": key}); 

}); 

$('#'+divId+' thead th').each(function() { 
    var title = $('#'+divId+' thead th').eq($(this).index()).text(); 
    $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
}); 

$("#" + divId).empty(); 
table = $("#" + divId).DataTable({ 
    destroy: true, 
    "data": object, 
    "columns": columns, 
    "scrollY":420, 
    "scrollX": true, 
    "order": [[ 1, "desc" ]], 
}); 

} 

Answer 1

这会帮助你。

$('#invoices-table thead tr#filterrow th').each(function() { 
    var title = $('#invoices-table thead th').eq($(this).index()).text(); 
    $(this).html('<select id="filter_comparator" style="width: 20%;" > <option value="eq">=</option> <option value="gt">&gt;=</option> <option value="lt">&lt;=</option> <option value="ne">!=</option></select><input type="text" onclick="stopPropagation(event);" style="width: 75% !important" id="filter" placeholder="Search'+title+'" />'); 
}); 


// Apply the filter 
$("#invoices-table thead input:not(.group-checkable)").on('keyup change', function(e) { 
    table.fnDraw(true); 
}); 

$('.group-checkable').on('click',function(){ 
    invoiceOnSelectAllCheckBoxClicked(this) 
}); 

var table = $('#invoices-table').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": "includes/sa_sales_invoice_ajax.php", 
    "bLengthChange": false, "bAutoWidth": false , "sScrollX": "100%", 
    aoColumns : [ 
     { "sClass": "center", 
      "mData": "TaskID", 
      "mRender": function (data, type, row) { 
      //alert(data+'_-_'+type+'_-_'+full); 
       return '<div class="input-control checkbox" data-role="#sample_1 .checkboxes" /> <label><input type="checkbox" name="reference" class="call-checkbox" value="' + row[1] + '"> <span class="check"></span></label></div>'; 
      } , "sWidth": "1%" },   
     { "sWidth": "10%" }, 
     { "sWidth": "40%"}, 
     { "sWidth": "8%"}, 
     { "sWidth": "9%"},   
     { "sWidth": "9%"} 
    ], orderCellsTop: true, 
    "scrollX": true, 
     "columnDefs": [{ // set default column settings 
      'orderable': false, 
      'targets': [0] 
     }, { 
      "searchable": false, 
      "targets": [0] 
     },  
     { 
      "targets": [1], 
      "render": function (data, type, row) { 
       return '<a href="'+row[1]+'">'+row[1]+'</a>'; 
      } 
      }   
     ], 
     "order": [ 
      [1, "asc"] 
     ], 
     "columns": [    // there must be an entry for every column 
       {"orderable": false},  
       null, 
       null, 
       null, 
       null, 
       null, 
       null 
       ] });  function invoiceOnSelectAllCheckBoxClicked(cb) { 

    // set all checkboxes in first column to same checked state 
    $('input[type=checkbox]').not(cb).prop('checked', cb.checked); 

} 
function stopPropagation(evt) { 
    if (evt.stopPropagation !== undefined) { 
     evt.stopPropagation(); 
    } else { 
     evt.cancelBubble = true; 
    } 

} 

一个在这里你的HTML代码

<tableclass="table striped hovered dataTable" id="invoices-table" aria-describedby="dataTables-1_info"> 
     <thead> 
      <tr> 
      <th class="table-checkbox1"><div class="input-control checkbox" data-role="#sample_1 .checkboxes" > <label> <input type="checkbox" class="group-checkable"> <span class="check"></span>  </label> </div> </th> 
      <th class="text-left" tabindex="0" aria-controls="orders-table" rowspan="1" colspan="1" aria-label="Engine: activate to sort column ascending" aria-sort="ascending"> &nbsp;&nbsp;&nbsp; ID </th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" > &nbsp;&nbsp;&nbsp; Name</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Platform: activate to sort column ascending" > &nbsp;&nbsp;&nbsp; Number</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" > &nbsp;&nbsp;&nbsp;Date</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" > &nbsp;&nbsp;&nbsp;Amount</th> 
      </tr> 

      <tr role="row" id="filterrow" > 
      <th style="visibility: hidden;"> </th> 
      <th class="text-left" tabindex="0" aria-controls="orders-table" rowspan="1" colspan="1" aria-label="Engine: activate to sort column ascending" aria-sort="ascending">Ref</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" > Client</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Platform: activate to sort column ascending" >Deliver to</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" >date</th> 
      <th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Version: activate to sort column ascending" >amount</th> 
      </tr> 
     </thead> 
     </table> 

我希望，这将帮助您得到您的问题的解决方案。