在Jquery Datatable的Individual列中搜索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>

我希望，这将有助于你为你的问题找到解决方案。