SearchBuilder not showing up when using serverside processing
SearchBuilder not showing up when using serverside processing
Link to test case: It's an intranet, cannot share sorry but here is my JS with the included dependencies:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/searchbuilder/1.1.0/css/searchBuilder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.0/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.1.0/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.0/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.0/js/buttons.print.min.js"></script>
<script>
$(document).ready(function () {
// Logout Button Click Event
$('#logoutButton').click(function() {
// Implement logout functionality here
alert('Logout clicked!');
// Redirect to logout page or perform other actions as needed
});
// Initialize DataTable
var table = $('#myTable').DataTable({
serverSide: true,
processing: true,
ajax: {
url: 'fetch_data.php', // PHP script to handle data fetching
type: 'POST'
},
columns: [
{ data: 'PartNo' },
{ data: 'Descrip' },
{ data: 'user_Number1' },
{ data: 'user_Number2' }
],
language: {
searchBuilder: {
add: 'Advanced Search',
condition: 'Condition',
conditions: {
'date': {
'after': 'After',
'before': 'Before',
'between': 'Between',
'empty': 'Empty',
'equals': 'Equals',
'not': 'Not',
'notBetween': 'Not Between',
'notEmpty': 'Not Empty'
},
'number': {
'between': 'Between',
'empty': 'Empty',
'equals': 'Equals',
'gt': 'Greater Than',
'gte': 'Greater Than or Equal To',
'lt': 'Less Than',
'lte': 'Less Than or Equal To',
'not': 'Not',
'notBetween': 'Not Between',
'notEmpty': 'Not Empty'
},
'string': {
'contains': 'Contains',
'empty': 'Empty',
'endsWith': 'Ends With',
'equals': 'Equals',
'not': 'Not',
'notEmpty': 'Not Empty',
'startsWith': 'Starts With'
}
},
clearAll: 'Reset',
delete: 'Delete',
data: 'Column',
left: 'Left',
right: 'Right',
title: {
0: '',
_: ''
},
value: 'Value',
valueJoiner: 'and'
}
},
searchBuilder: {
container: '#searchBuilder',
columns: [0, 1, 2, 3]
}
});
// Initialize DataTable buttons and append them below the table
new $.fn.dataTable.Buttons(table, {
buttons: [
'csv', 'excel', 'copy', 'print'
]
}).container().appendTo($('#myTable_wrapper .row:eq(1) .col-sm-12:eq(0)'));
// Hide loading indicator after DataTable is initialized
table.on('init.dt', function () {
$('.dataTables_processing').hide();
});
});
</script>
Error messages shown:
Uncaught TypeError: Cannot read properties of null (reading 'indexOf')
at c._setUp (dataTables.searchBuilder.min.js:108:89)
at HTMLTableElement.<anonymous> (dataTables.searchBuilder.min.js:105:404)
at HTMLTableElement.fn (jquery-3.7.0.js:4880:18)
at HTMLTableElement.dispatch (jquery-3.7.0.js:5135:27)
at elemData.handle (jquery-3.7.0.js:4939:28)
at Object.trigger (jquery-3.7.0.js:8619:12)
at HTMLTableElement.<anonymous> (jquery-3.7.0.js:8697:17)
at Function.each (jquery-3.7.0.js:383:19)
at jQuery.fn.init.each (jquery-3.7.0.js:205:17)
at jQuery.fn.init.trigger (jquery-3.7.0.js:8696:15)
Description of problem: Everything works fine with the exception of the SearchBuilder. It does not render on screen and the console error above is present. Any ideas what I could have done wrong here? I have 65,000 records so it's rather important that it works for filtering, any help is greatly appreciated.