您好我正在使用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" ]],
});
}
答案 0 :(得分:0)
$('#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">>=</option> <option value="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"> ID </th>
<th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" > Name</th>
<th class="text-left" tabindex="0" aria-controls="dataTables-1" rowspan="1" colspan="1" aria-label="Platform: activate to sort column ascending" > Number</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>
<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>
我希望,这可以帮助您找到问题的解决方案。