SearchBuilder not showing up when using serverside processing

SearchBuilder not showing up when using serverside processing

JasonBJasonB Posts: 1Questions: 1Answers: 0

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.

Sign In or Register to comment.