Search Builder server side - unknown field type date

schwaluck

Hi, I tried to switch search builder from client to server side. Before that I have updated editor to version 2.05. But now I always get the following error message when I try to load the page with the table:
"Uncaught Error: Error adding field - unknown field type date".

My JS code:

    var table = $('#table').DataTable( {
        dom: 'Bfrtilp',
        processing: true,
        serverSide: true,
        responsive: {
            details: {
                renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                        return col.hidden ?
                            '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                '<td>'+col.title+':'+'</td> '+
                                '<td>'+col.data+'</td>'+
                            '</tr>' :
                            '';
                    } ).join('');
 
                    return data ?
                        $('<table/>').append( data ) :
                        false;
                }
            }
        },
        ....
        buttons: [
    
            { extend: "create", editor: editor, className: 'createButton' },
            { extend: "edit",   editor: editor, className: 'createButton' },
            { extend: "remove", editor: editor, className: 'createButton' },
            "selectNone",
            {
            text: 'Alle Auswählen',
            action: function () {
            table.rows( {search:'applied'} ).select();
            }
            },          
            {
                extend: 'searchBuilder',
                    config: {
                        columns: [1,6,14,18,24,27],
                        conditions: {
                            "moment":{
                                    '=': null,
                                    '!null': null,
                                    '<': {
                                        conditionName: 'vor',
                                        },
                                    '!=': null,
                                    '>': {
                                        conditionName: 'nach',
                                        },
                                    'between': {
                                        conditionName: 'zwischen',
                                        },
                                    '!between': null,
                                    'null': null,
                                    }
                        },
                    },
            },

My html code:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped" id="table_ald_dispo_2" data-ajaxurl="<?= site_url('Controller/ajax_add_edit'); ?>" width="100%">
                    <thead>
                        <tr class="table-design-1">
                            <th>Column 1</th>
                            ...
                            <th>Column 34</th>                          
                        </tr>
                    </thead>
                    <tfoot>
                        <tr class="table-design-1">
                            <th>Column 1</th>
                            ...
                            <th>Column 34</th>                      
                        </tr>
                    </tfoot>
                </table>

    <!-- Jquery 3.4.1 gets loaded via the footer in the layout -->
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.2.0/js/dataTables.searchBuilder.min.js"></script>   
    <script type="text/javascript" charset="utf-8" src="<?php echo base_url();?>/assets/js/datatable/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo base_url();?>/assets/js/datatable/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/searchpanes/1.1.1/js/dataTables.searchPanes.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.21/api/sum().js"></script> 
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>  

Does anyone have an idea what I am doing wrong?
I appreciate any help.

Schwaluck

kthorngren

See if this thread asking about the same error helps.

Kevin

schwaluck

Hi Kevin,

thanks for your quick response.

I will check it out soon and let you know if helps or not but I think that should be the problem!

Schwaluck

schwaluck

Alright I replaced the fields with the "date" format by the datetime format. This solved the problem stated above.

However now a new problem occurs:
"Uncaught DateTime library is required For more information, please refer to https://datatables.net/tn/15"

However, I don't understand why, because if I understood the tech-notes correctly, this error is supposed to occur when the dateTime library is not loaded. But for me it is loaded (see HTML code no. 3). Is there something wrong with the order in which the files are loaded or is there a conflict with datetime-moment.js?

Thanks in advance!

Schwaluck

kthorngren

Looks like you are loading datatables.min.js twice on lines 19 and 23. It should be loaded only once. Fix that and make sure all the JS that require datatables are loaded after. Hope that fixes the issue.

Kevin

schwaluck

Hi Kevin,

thanks for your help.
This fixxed the issue.
However, those new issues arrised:

I upgraded sucessfully and the table is loading without any issues. We use SearchBuilder and SearchPanes on it.
Now, I wanted to try out the ServerSide: true, for this table, in order to increase the performance (we have approx. 5k rows which is kinda slow with both on client-side).

For SearchBuilder, we use moment to bring the dates to a german format (DD.MM.YYYY HH:MM:SS).

Now, when I do this and try to use the "between" option while picking two dates in SearchBuilder, the error seen in the attached image occurs. Awkwardly, it kinda returns something in the table, but sadly just a piece of all the rows which should show up.

When I re-open the SearchBuilder, the dates are formatted into an ISO-format, shown in SearchBuilder.

I'll attach those two images.
Also, after this error happens for SearchBuilder, SearchPanes isn't working anymore as well, as long as SearchBuilders filter is applied.

Now here is the order in which I load the libraries:

    <script type="text/javascript" charset="utf-8" src="<?php echo base_url();?>/assets/js/datatable/datatables.min.js"></script>
    
    <!--Script for Responsiveness-->
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>  
    
    <!--Script for Multi selection -->
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>  
    
    <!--Script for datetime format-->
    <script src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>     

    <!--Script for Search Builder-->
    <script src="https://cdn.datatables.net/searchbuilder/1.2.0/js/dataTables.searchBuilder.min.js"></script>  
    
    <!--Script for Search Panes-->  
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/searchpanes/1.4.0/js/dataTables.searchPanes.min.js"></script>
    
    <!--Scripts for buttons -->
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js"></script> 
    
    <!--Script for the Editor-->
    <script type="text/javascript" charset="utf-8" src="<?php echo base_url();?>/assets/js/datatable/dataTables.editor.min.js"></script>
    
    <!--Scripts for Plugins (moment.js, Api Sum)-->
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/plug-ins/1.10.21/api/sum().js"></script>

Does anyone have an idea on what the problem is here?
Kinda clueless for now.

Thanks for any hint!

Schwaluck!

allan

What server-side script are you using for the server-side processing? Are you using one of our Editor libraries?

Allan

schwaluck

Hi Allan,

thanks for your quick feedback. We are currently using the PHP library as described here: https://editor.datatables.net/examples/inline-editing/serverSide.html

Or do you mean this file https://github.com/DataTables/DataTablesSrc/blob/master/examples/server_side/scripts/ssp.class.php?

I hope this helps you.

Best regards

Schwaluck

schwaluck

Hi again,

sadly I haven't found a solution yet.

But I discovered these behaviours:

It seems like the searchBuilder is kinda working (it's doing the requests to the server and also applying the date-filter) but the error is still there (Uncaught TypeError: e is null).

And also: If we use SearchBuilder serverside to filter a date-range and try to filter our searchPanes afterwards (which is also set to server side), its not working. So it kinda blocks SearchPanes.

Does anyone have an idea?

Thanks!

sandy

Hi @schwaluck ,

It seems like the searchBuilder is kinda working (it's doing the requests to the server and also applying the date-filter) but the error is still there (Uncaught TypeError: e is null).

Could you change to using the non-minified version of SearchBuilder - that will let us identify exactly which line the error is occuring on.

If we use SearchBuilder serverside to filter a date-range and try to filter our searchPanes afterwards (which is also set to server side), its not working. So it kinda blocks SearchPanes.

This is also not something that we have seen before - could you please link to a test case? Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Thanks,
Sandy