Can't seem to initialise individual column searching (edited)
Can't seem to initialise individual column searching (edited)
I'm able to load the page without errors, but the column search bars don't appear. Could it be an incompatibility with Bootstrap?! Or maybe other plugins that I'm also using? Or am I doing something wrong?
My initialisation code is:
<
script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#inventory1 tfoot th').each( function () {
var title = $('#inventory1 thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#inventory1').fadeIn(1000).DataTable(
// DT START
{
"bStateSave": false,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"autoWidth": true,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(1)', nRow).html('<a href="inv-detail.php?Serial=' + aData[11] + '">' +
aData[1] + '</a>');
return nRow;
},
"columnDefs": [
{
"targets": [ 10 ],
"visible": false,
"searchable": true,
},
{
"targets": [ 11 ],
"visible": false,
"searchable": true,
},
],
"dom": 'TC<"clear">Rlfrtip',
"oColVis": {
"buttonText": "Show / Hide",
"aiExclude": [ 10 ],
//"restore": "Reset to initial",
},
colReorder: {
realtime: true,
},
"tableTools": {
"aButtons": [
"copy",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sTitle": "Inventory Report",
"mColumns": "visible"
},
{
"sExtends": "csv",
"sFileName": "Inventory Report.csv",
"mColumns": "visible"
},
],
"sSwfPath": "js/plugins/dataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
},
"bProcessing": false,
"bServerSide": true,
"bJQueryUI": false,
"sAjaxSource": "inventory_dt1.php",
"aoColumns": [
{ "sWidth": "10%",},
{ "sWidth": "4%" },
{ "sWidth": "11%" },
{ "sWidth": "3%" },
{ "sWidth": "8%" },
{ "sWidth": "6%" },
{ "sWidth": "6%" },
{ "sWidth": "5%" },
{ "sWidth": "13%" },
{ "sWidth": "11%" },
{ "sTitle": "Software" },
{ "sTitle": "Serial" },
]
})
// DT END
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
Many thanks for any help.
BSUK
Answers
Also I can't figure out how to display the code on this forum :(